Question

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

<h1>main title</h1>

Now I want the title to be in a different color:

<h1>main <span>title</span></h1>

So I do:

h1 {
 color: #ddd;
}
h1 span {
 color: #333;
}

Is there a way not to use the span tag and only specify in CSS the last word to be a different color?

Answer 1

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;
}