CODEWITHSUNDEEP
css
lvarayut
lvarayut

Reputation: 15259

CSS: Automatic changing color of a specific character?

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?

Upvotes: 9

Views: 15829

Answers (3)

omma2289
omma2289

Reputation: 54629

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

Upvotes: 8

Nicole Stutz
Nicole Stutz

Reputation: 516

I know your questions is about CSS, but jQuery maybe the right tool for it. You may have a look into it.

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

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

Upvotes: -1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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.

Upvotes: 1

Related Questions