CODEWITHSUNDEEP
htmlcss
gsf
gsf

Reputation: 7232

css selector for character

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

Upvotes: 4

Views: 3861

Answers (2)

Tiago Marinho
Tiago Marinho

Reputation: 2216

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

Upvotes: 6

DeKnarf
DeKnarf

Reputation: 70

It's not possible with CSS, I've actually been looking for something quite similair. This is what I found a short while back: (jQuery plugin)

http://bartaz.github.io/sandbox.js/jquery.highlight.html

You can start with certain characters highlighted upon pageload... The documentation provided is not that hard to follow if you have some expecience.

Upvotes: 0

Related Questions