[css] CSS selector based on element text?

Is there a way to select an element in css based on element text?

ie:

li[text=*foo]

<li>foo</li>
<li>bar</li>

That probably doesn't work.

Edit: Also only need to support Chrome.

This question is related to css css-selectors

The answer is


It was probably discussed, but as of CSS3 there is nothing like what you need (see also "Is there a CSS selector for elements containing certain text?"). You will have to use additional markup, like this:

<li><span class="foo">some text</span></li>
<li>some other text</li>

Then refer to it the usual way:

li > span.foo {...}

I know it's not exactly what you are looking for, but maybe it'll help you.

You can try use a jQuery selector :contains(), add a class and then do a normal style for a class.