Home » Html » CSS for changing color of last word in h1

CSS for changing color of last word in h1

Posted by: admin January 2, 2018 Leave a comment

Questions:

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?

Answers:

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

Questions:
Answers:

“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.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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>