CSS: Automatic changing color of a specific character?

Question

I am writing a blogger which is about programming. I want it to automatically change a color of specific character without manually put a class or id into it. For example,

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

When I put the "$" character inside the blockquote tag, It would automatically add color: #bb60d5 to change its color.

Is there a way to do that?

Answer 1

There's no way to do this using CSS, you can however use javascript to scan the page on load and wrap all instances of $ in a span with your custom style, here's an implementation using jQuery:

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

Demo fiddle

Answer 2

CSS can't find words or something related to that and it can't automatically just add colors or apply styles.

You might use JavaScript, or you can use some server side coding to find out this word '$' and apply some style to that div. For example:

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

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

But it won't work in CSS, its just JavaScript or Server Side. You can use CSS to just apply colors, or just use style in each element itself.