Change Last Letter Color

Change last letter color

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++]);

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/

css last letter selector

There is no last-letter selector instead wrap it in span and style it

p::first-letter, p span {  color: red;}

<p>test test tes<span>t</span></p>

How can I change the color of the last letter in an element?

You can use the last-child property of the specific element, or the nth-child option.

Last letter in input needs to be in red color

You can't do it with an input tag, unfortunately. We don't have a way to style an individual letter (except for the first letter).

However, who says we have to use an input tag? You can display a contenteditable span for instance, and feed all the updates into a hidden input tag:

span.addEventListener('input', function (e) {
  input.value = this.textContent;
});

Style it with some css to make it look like an input:

.awesome-span {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;

  border: 2px inset;
  background-color: white;
}

Of course, make the final character is highlighted:

span.addEventListener('input', function (e) {
  input.value = this.textContent;

  // dirty hack to flatten the tree 
  this.textContent = this.textContent;

  var lastChar = document.createElement('span');
  lastChar.classList.add('highlighted-span');
  lastChar.appendChild(this.firstChild.splitText(this.textContent.length - 1));

  this.appendChild(lastChar);
});

And make sure to place cursor at the end:

// add to end of event handler
var range = document.createRange();
range.selectNodeContents(this);
range.collapse(false);

var selection = window.getSelection();
selection.removeAllRanges();


selection.addRange(range);

var input = document.getElementsByName('filler-up')[0],    span = input.previousElementSibling;
span.addEventListener('input', function (e) {  input.value = this.textContent;    // dirty hack to flatten the tree   this.textContent = this.textContent;    var lastChar = document.createElement('span');  lastChar.classList.add('highlighted-span');  lastChar.appendChild(this.firstChild.splitText(this.textContent.length - 1));    this.appendChild(lastChar);    var range = document.createRange();  range.selectNodeContents(this);  range.collapse(false);    var selection = window.getSelection();  selection.removeAllRanges();  selection.addRange(range);});

.awesome-span {  -webkit-appearance: textfield;  -moz-appearance: textfield;  appearance: textfield;    border: 2px inset;  background-color: white;  width: 100px;}
.highlighted-span {  color: red;}input {  opacity: 0.2;}

<span class='awesome-span' contenteditable>blah</span><input name='filler-up' />

Changing the color of the last character of a word with a javascript loop

You can do:

document  .querySelectorAll('#pColors p')  .forEach(p => {    const len = p.innerText.length - 1    p.innerHTML = `${p.innerText.slice(0, len)} <span class="red">${p.innerText[len]}</span>`  })

.red { color: red; }

<section id="pColors">   <h1>Name</h1>
   <p>John</p>   <p>Jacques</p>   <p>Peter</p>   <p>Robert</p></section>

CSS / HTML - Changing a letter color

<p>This is my tex<span style = "color:red">t</span></p>

Is a easy way to do this.

Result:

This is my text

Change color of Place holder last character

A bit tricky, and you'll have to check yourself for the different browsers' support, but here is a Fiddle Demo for you :-)

html

<input type="text" placeholder="Name" />

css

input::-webkit-input-placeholder:after{color:red;content:" *";}

Just moved the * to be a part of the :after element, and styled it separately.

Change Last Letter Color