CSS rule based on content

Question

Hi SO,

I would like to apply a different style to all anchors containing a specific word. Can it be done in pure CSS? It's ok if it's CSS3-only.

Thanks

Answer 1

yes there is a :contains selector in CSS3.

li:contains("special"){text-style: italic;}

it is mentioned about 1/2 down this page here

This is something you can also do with jQuery too ...

Answer 2

No. :contains was once proposed but is not in the current Working Draft of CSS3 Selectors.

You would need some JavaScript, for example:

for (var i= document.links.length; i-->0;)
    if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
        document.links[i].style.color= 'red';

Answer 3

You can match attribute values though. If you use custom data attributes, it might get what you want.