CSS for changing color of last word in h1

Question

I have a website that I am developing using CSS3 and I have h1 tag for the title:

main title

Now I want t

Answer 1

CSS has no knowledge about words. The only thing existing is :first-letter and :first-line. A construct like a word and a pseudo element for last are not existing.

If you really want to have a workaround within one element, then you must use javascript to parse the last word out. I think the way you are going is the best way when you only have a few cases on the page.

If you use it for h1 then you should have it so or so only once on the page.

Answer 2

Maybe with "after" selector

element1
{
    properties
    main
}

element1:after 
{
    content: "title";
    color: pickone;
}

I recommend stay with "span". If you don't want to have a huge css with that extra stuff you can always do this in your html:

<span style="color:#000;">text</span>

Answer 3

CSS works on elements... but generally not on the text or data inside an element. You could use Javascript, if you'd like, to work with the actual text inside of the elements, though.

Answer 4

This is not possible with pure CSS. However you can use lettering.js to get a ::last-word selector. CSS-Tricks has an excelent article on this: CSS-Tricks: A call for nth-everything. You can then do the following:

h1 {
  color: #f00;
}

/* EDIT: Needs lettering.js. Please read the complete post,
 * before downvoting. Instead vote up. Thank you :)
 */
h1::last-word {
  color: #00f;
}

Answer 5

No. There is no selector for specific words, see Selectors Level 3: 2. Selectors.

You have to use the span tag or run JavaScript to convert every word into a span containing that word.

Answer 6

No, there is not. Only ::first-letter and ::first-line exist in CSS. Anything else must be done manually with an element (e.g. span).

Note: Neither ::first-word nor ::last-word are planned, at least not in the Selectors level 4 spec.