CSS: Automatically change the color of a certain character?

Question

I am writing a blogger about programming. I want it to automatically change the color of a certain character without manually entering a class or identifier in it. For instance,

<blockquote class="tr_bq"> <span style="color: #bb60d5;">$</span> <span>php app/console doctrine:schema:create</span> </blockquote> 

When I put the "$" symbol inside the blockquote tag , it automatically adds color: #bb60d5 to change its color.

Is there any way to do this?

Answer 1

It is not possible to do this with CSS, however you can use javascript to scan the page when loading and transfer all instances of $ in the range with your custom style, here is an implementation using jQuery:

 $('blockquote').each(function () { $(this).html($(this).html().replace(/(\$)/g, '<span style="color: #bb60d5;">$1</span>')); }); 

Demo script

Answer 2

CSS cannot find words or anything related to this, and it cannot automatically just add colors or apply styles.

You can use JavaScript, or you can use some server-side encoding to find out the word "$" and apply some style to this div. For instance:

 <div style="color: red;"> $<span style="color: black">php app/console doctrine:schema:create</span> </div> 

This will work if you know that the server will read files, in ASP you can use string.Split() to find out some parts. You can use Regex, for PHP, you may need to do a search!

But this will not work in CSS, its just JavaScript or the server side. You can use CSS only for applying colors or just use style for each element.

Answer 3

I know your questions are about CSS, but jQuery might be the right tool for it. You can look into it.

 if( $("blockquote").children("span:contains('$')").length ){ $("blockquote span:nth-child(1)").css("color", "#bb60d5"); } 

http://jsfiddle.net/NicHope/9de7k/#base