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:

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