Is there a way to style the first word in tag differently than the other words in that tag? For example, say I had this snippet of code:
<h4>Worpress Quick Tip Of The Week</h4>
Is there way I could style the word "Wordpress" differently than the other words using css? I know I could just put a span with a unique class around the word Wordpress, but is it possible without doing that?
No you can't.
You would need to use another tag.
CSS uses selectors which target tags. However, as you will notice, text inside the tag is not anything that could be targetted by even any selector. You target the tag which contains the text.
If you can wrap anything around it then you could. For example, just add a span, and then you can:
p:first-child {font-size:2em}
Because the first child of the p will be the span.
You could use the :first-letter pseudo-tag if you wanted to style the first letter but I'm unaware of a first-word tag.
h4:first-letter {
font-size: larger;
}
Have a look at this please.
There is first-letter and first-line but not first-word, however you can achieve this with the help of javascript.
Demonstration.
There is no :first-word selector unfortunately. You can take a look at this script though that implements it by adding the firstWord class to, well, the first word.
span.firstWord {
font-weight:bold;
text-decoration: underline;
}
Related
After using p::first-letter I cant make p::selection, because it works only to other letters, not including first.picture of site. How can I gat access to the selection of first letter?
I've tried to do smth like this: p::first-letter::selection{}, but as we know we can't use more than one pseudo element.
Unfortunately you are right and there is no way of chaining pseudo elements. As far as I know the only way to achieve what you are trying to do is by wrapping the first letter in a <span> or similar and put the styling onto there.
If your content comes from a CMS or similar you'll probably also need some JavaScript to dynamically render it around the first letter.
span {
font-size: 2rem;
}
::selection {
color: red;
}
<p>
<span>H</span>ello
</p>
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
I'm implementing the following CSS Selector
Select all span elements except those which class contains the word icon
So the following seems to be working:
.music-site-refresh span:not([class*="icon-"]) {
font-family:Montserrat, sans-serif;
}
But I thought it should be like this:
.music-site-refresh span:not(span[class*="icon-"]) {
font-family:Montserrat, sans-serif;
}
But the second one doesn't work in my testbed.
Could anyone explain me which one is correct and why?
Here is some barfed html for example purposes:
<span class="cmImageSliderIndicatorActive icon-circle-blank" data-set="0"></span>
<div class="janrain-share-providerslist-provider-image janrain-provider-icon-grayscale-email"></div>
There are more icons. It is not an icon class, that is why I'm using class*
In CSS, :not is considered a pseudo-class, which puts it into the same category as other pseudo-classes like :hover, :focus, etc.
I think it makes more sense to explain this when thinking of one of those other pseudo-classes.. let's look at :hover as an example.. when you write a selector using :hover, it would look something like this:
div:hover {}
You can see that the colon joins the hover pseduo-class to the element.. which is where that "pseudo-class" name comes from.. It's not a real CSS class, but it acts the same way as one. It applies as a modifier to the original element in the selector.
So now let's look at :not again. When you are using this pseudo-class on a selector, it's joined to it.. so saying :not(span.icon) can kind of be thought of writing it out like this, to simplify it out a fair bit:
not spanspan.icon
which doesn't really make sense.
I was just looking at my CSS and the h1 tag is defined like this:
h1 { .... }
When everything else either has an id "#" or a "." class preceding it. What is the reason header tags don't need this? Have I infact made a mistake and they do need one?
This means that all occurences of h1 will share the same style. Similarly, you can have a style defined for any other element, e.g.:
p { font-family: Helvetica; }
That means all p tags will use the Helvetica font.
Note that it's also a best practice to have just one h1 element in a page.
You can find a brief overview what different types of selectors mean here.
It's said in the doc:
5.4 Type selectors
A type selector matches the name of a document language element type.
A type selector matches every instance of the element type in the
document tree.
So any valid element may be selected just by specifying its name. It also works in more complex selectors, by the way.
Its not just header tags. All elements are "selected" simply by their name alone. '#' is used to "select" by id and "." is used to "select" by class.
The idea is not that the "h1" tag does not need to have "class or id". It can have a class or id just like other tags. It is just up to you, and how you use it. As mentioned in other answers if you want to apply a specific style to all your h1, then you will have it without a class and your CSS would be: h1{...}
But if you want to use specific styles to each "h1" tag you have, then you can use a class attribute to identify each one "h1", see the following example:
Let's say you have two "h1" tags in your HTML code and you want to style each one with a different color, then you can do the following:
HTML:
<h1 class="first-header">Hello World1</h1>
<h1 class="second-header">Hello World2</h1>
CSS:
h1.first-header{color:red;}
h1.second-header{color:blue;}
This will display your first h1 in red color and the second in blue.
is it possible to pick out and style a particular word in a paragraph using just css? So for example in the sentence "hello my name is nick, hello to you all", would it be possible to target the word "hello" wherever it appears and to add a rule, such as changing the color of hello anytime it appears? I don't want to have to add a span tag around every hello that appears.
I would like to do this in only css if possible. css3 is fine to use.
CSS has 2* Pseudo-Elements:
::first-line and ::first-letter. These are the only possibilities to target only a part of the innerhtml of a Tag.
(*ofc it has more, i mean for the purpose of selecting only a part of the innerhtml.)
No, you'd need to use javascript for that. Or, if you're using PHP/ASP...etc, you could add spans around any designated word(s) automatically before the page renders.
If you know the contents of the para and have patience you can wrap each of those words that you need to highlight in a span tag. Assign them the same class and then style it.
For fine control over any particular word, or fragment, you'd have to wrap it into a span and style the span, as others said.
However, there are also the :first-line and :first-letter pseudo-elements, available since CSS2. So, for example, you can have the first letter have a different font-size, and the whole first line have a different color, like this:
p:first-letter {font-size: 30px;}
p:first-line {color: #FF0000;}
What I know its not possible to target textnode, you can do it by using Javascript. Wrap the Hello word with a span tag and set the properties to the SPAN tag
CSS selectors work on tags or pseudo clases, not querying your text. Check the reference http://www.w3.org/TR/selectors/, maybe you can find something useful here.