Style half of a word, sentence, etc

Question

I'd like to show a title with the first three characters in different color.

I know this can be done with <h2><span>The</span> awsome title</h2> but I was wondering if there is some kind of "nth-child" property that can be applied to characters inside an element.

I'd like to avoid breaking the text by inserting other elements ( etc.)

A (relatively) crossbrowser solution would be welcome.

Answer 1

There is no cleaner way than what you already have.

<h2><span>The</span> awesome title</h2>

With CSS:

h2 {
    color: red
}
h2 span {
    color: blue
}

There's :first-letter and :first-line, but no :first-word.

I imagine the reason for this is that it's hard to define exactly what a "word" should be.

The only way to do it without changing your markup is to use JavaScript to enclose the first word with a <span> (and style it the same way), but I would only recommend that if the rest of your site already heavily relies on JavaScript to function.