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

Taking iblue's answer but making a bit more sensible.

Use lettering.js with the following setup:

$(document).ready(function() {
    $('h1').lettering('words');
});

That will split out any <h1> tag into something like so:

<h1>
    <span class="word1">Highlight</span>
    <span class="word2">the</span>
    <span class="word3">last</span>
    <span class="word4">word</span>
    <span class="word5">a</span>
    <span class="word6">different</span>
    <span class="word7">color</span>
</h1>

Of course we can't just target .word7 as that might not be the last so we can use the :last-child CSS pseudo-class.

h1 {
    color: #333;
}

h1 > span:last-child {
    color: #c09;
}

Now the last word is a different color. Check out the live example.

Only thing to be careful about is support for :last-child

Answer 2

"last-word" won't work on every browser; for instance, it doesn't work with Safari. I wouldn't use the accepted answer. I don't think it's a good idea to import an entire library or plugin just to change the last word of a single title, it's like "killing a bug with a cannon"... Instead I would use a single Javascript function, and a global class. Something like this:

<h1>This is my awesome <span class="last-word">title</span></h1>

CSS:

<style>
    .last-word {font-weight:bold; /* Or whatever you want to do with this element */ }
</style>

Initially, you would have something like this:

<h1 class="title">This is my awesome title</h1>

Then, you could initialize a Javascript method to change the last word on $(document).ready() =>

<script>
    $(document).ready(function() {
        $('.title').each(function(index, element) {
            var heading = $(element);
            var word_array, last_word, first_part;

            word_array = heading.html().split(/\s+/); // split on spaces
            last_word = word_array.pop();             // pop the last word
            first_part = word_array.join(' ');        // rejoin the first words together

            heading.html([first_part, ' <span class="last-word">', last_word, '</span>'].join(''));
        });
    });
</script>

Good luck.

Answer 3

CSS doesn't really interact with text in that manner. it interacts with elements in the DOM tree. Adding a span around that word is the standard way (that I've seen, at least) of differentiating a piece of text. Just use the span tag, the maintainer of the code will thank you for it.

Answer 4

No, there is no selector in CSS that would refer to the last (or first) word of an element. There are pseudo-elements for first letter and for first line, but words need to be wrapped in containers in order to style them separately.