css selector for character

Question

I have a span with a text:

<span class="magic">a sample text</span>

is it possible to create selector that will change the color of every symbol 'a' or ' '

.magic...<something> {
   color: red;
}

note: I do not want to surround every character with additional span - I know this will work

Answer 1

There's no way to do this with CSS only, since it doesn't provide any selectors for this. Fortunately you can use javascript and regex instead.

Here's a example of jquery code that will replace every "a" character that's inside a p element with <span class="red">a</span> so it can be styled differently (I found this code somewhere here, in stackoverflow, and adapted it to your needs):

$('p').html($('p').html().replace(/a/g, '<span class="red">a</span>'));

Updated demo