CODEWITHSUNDEEP
htmlcss
user1979270
user1979270

Reputation:

Change last letter color

Example code:

<p class="test">string</p>

I want to change the color on the last letter, in this case "g", but I need solution with css, I don't need a javascript solution.

I display the string letter by letter and i cant use static solution.

Upvotes: 47

Views: 119266

Answers (8)

Spudley
Spudley

Reputation: 168655

Everyone says it can't be done. I'm here to prove otherwise.

Yes, it can be done.

Okay, so it's a horrible hack, but it can be done.

We need to use two CSS features:

  • Firstly, CSS provides the ability to change the direction of the flow of the text. This is typically used for scripts like Arabic or Hebrew, but it actually works for any text. If we use it for English text, the letters are displayed in reverse order to how the appear in the markup. So to get the text to show as the word "String" on a reversed element, we would have to have markup that reads "gnirtS".

  • Secondly, CSS has the ::first-letter pseudo-element selector, which selects the first letter in the text. (other answers already established that this is available, but there's no equivalent ::last-letter selector)

Now, if we combine the ::first-letter with the reversed text, we can select the first letter of "gnirtS", but it'll look like we're selecting the last letter of "String".

div {
  float: left;
  unicode-bidi: bidi-override;
  direction: rtl;
}

div::first-letter {
  color: blue;
}
<div>gnirtS</div>

Yes, this does work -- you can see the working fiddle here: http://jsfiddle.net/gFcA9/

But as I say, it is a bit hacky. And who wants to spend their time writing everything backwards? Not really a practical solution, but it does answer the question.

Upvotes: 214

Marc_Alx
Marc_Alx

Reputation: 1441

Another solution is to use ::after

.test::after{
    content: "g";
    color: yellow;
}
<p class="test">strin</p>

This solution allows to change the color of all characters not only letters like the answer from Spudley that uses ::first-letter. See ::first-letter specification for more information. ::first-letter applies only on letters it ignores punctuation symbols.

Moreover if you want to color more than the last character you can :

.test::after{
     content: "ing";
     color: yellow;
}
<p class="test">str</p>

For more information on ::after check this link.

Upvotes: 29

joeinfo
joeinfo

Reputation: 37

i dont have the ability to comment on an answer thread but i wanted to point out an error in an answer provided by Marc_Alx that otherwise works wonderfully. that solution worked for me only after adding a semi-colon behind the content property... so it looks like content:"ing";

.test::after{
  content:"ing";
  color:yellow;
}
<p class="test">str</p>

Upvotes: 0

David Kiger
David Kiger

Reputation: 1996

Without using javascript, your only option is:

<p class="test">strin<span class="other-color">g</span></p>

Edit for your fiddle link:

I'm not really sure why you said you didn't need a javascript solution, since you have quite a bit of it already. Regardless, in this example, you need to make only a couple small changes. Change line 10 from

elem.text(elem.text() + contentArray[current++]);

to

if ( current == contentArray.length-1 ) {
    elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
    elem.html(elem.html() + contentArray[current++]);
}

Note that it's important to use .html() instead of .text() now, since there's actually HTML markup being inserted.

Working fiddle: http://jsfiddle.net/QTUsb/2/

Upvotes: 16

Supersharp
Supersharp

Reputation: 31161

Use ::after pseudo-element combined with attr() function: 

p::after {
    content: attr(data-end) ;
    color: red ;
}
<p data-end="g">Strin</p>


p::after {
  content: attr(data-end) ;
  color: red ;
}
<p data-end="g">Strin</p>

Upvotes: 54

Jastrzebowski
Jastrzebowski

Reputation: 194

It could be achieved using only CSS and an ::after pseudo-element without any changes in HTML:

.test {
  font-size: 16pt;
  position: relative;
}
.test::after {
  bottom: 0;
  color: red;
  content: 'g';
  position: absolute;
  transform: translate(-100%, 0);
}
<p class="test">string</p>

Upvotes: 12

shaan gola
shaan gola

Reputation: 147

$(document).ready(function() {
  var str=$("span").text();
  strArr=str.split("");
  for(var key=0;key<=strArr.length-1;key++) {
    if(key==strArr.length-1) {
      var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
      strArr[key]=newEle;
    }
  }
  var newtext=strArr.join("");
  $("span").html(newtext);  
});
  
span#lastElement {
  color: red;
}

Upvotes: 0

Stephen P
Stephen P

Reputation: 14800

In what way do you "display the string letter by letter"? If you're looping through the characters in a string (variable) you can certainly tell when you're at the last letter and wrap it in a whether doing so on the server side or client side.

Looking at the fiddles attached to another of your questions ...

If this is what you're talking about, you might have to set the .innerHTML of the element instead of the element.text()

From the fiddle at http://jsfiddle.net/SLKEn/ you would change it to something like this

if(current < contentArray.length) {
    elem.html(
            elem.html() +
              (current == contentArray.length-1 ?
               '<span class="lastchar">' + contentArray[current++] + '</span>' :
               contentArray[current++])
             );
        }

along with CSS span.lastchar { color: red; }

Update: working fiddle based on your other question.

Upvotes: 1

Related Questions