CODEWITHSUNDEEP
htmlcsscolors
Alexei
Alexei

Reputation: 493

CSS for changing color of last word in h1

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?

Upvotes: 31

Views: 119202

Answers (13)

GlennFriesen
GlennFriesen

Reputation: 312

Styling the final word is completely possible with normal CSS without javascript using data-text and :after with content: attr(data-text).

<h1 data-text="word">This is the final word</h1>

h1 {
  color: #154734;
}
h1:after{
    content: attr(data-text);
    color: #BD8B13;
    transform: translateX(-100%);
    position: absolute;
}

Demo

Upvotes: 0

user20073992
user20073992

Reputation: 1

This is another way around it.

  1. Create the underline using the after pseudo element
  2. Control the width of the underline with "width"

Example:

.something:after 
{
    content: "";
    position: absolute;
    width: 98%;
    display: block;
    height: 2px;
    background-color: #000;
    bottom: 5px;
}

I selected a width < 100% so that it fits underneath the text with the letter spacing I wanted. This solution worked well for me.

Upvotes: 0

Srinivas08
Srinivas08

Reputation: 1062

Use lettering.js

CDN : <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>

, and add this script into footer for selecting the element and splitting it to words.

For example, <script>jQuery('h3').lettering('words')</script>

Now, if you inspect element and check , the word will be splitted, and class will be there word1, word2, word3 and so on depending on number of words...

lettering js word css

Now pick that class of word you want to edit, and write CSS for that.

CSS Example : .word3 {color : red;}

and done!

Upvotes: 0

WolfieZero
WolfieZero

Reputation: 387

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

Upvotes: 3

iblue
iblue

Reputation: 30404

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

Upvotes: 33

javierluz
javierluz

Reputation: 121

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

Upvotes: 12

summea
summea

Reputation: 7583

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.

Upvotes: 1

0b10011
0b10011

Reputation: 18785

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.

Upvotes: 8

ramonovski
ramonovski

Reputation: 414

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>

Upvotes: -2

Sven Bieder
Sven Bieder

Reputation: 5681

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.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

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.

Upvotes: 1

Zeta
Zeta

Reputation: 105876

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.

Upvotes: 3

Scott M.
Scott M.

Reputation: 7347

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.

Upvotes: 2

Related Questions