CSS selector based on element text?

CssCss Selectors

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

Not with CSS directly, you could set CSS properties via JavaScript based on the internal contents but in the end you would still need to be operating in the definitions of CSS.

Solution 3 - Css

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 {...}
Categories
Recommended Css Solutions
Recommended Css Selectors Solutions

Previous Solution:

How to print a percentage value in python?

PythonPython 2.x

Next Solution:

Passing an array by reference

C++Arrays

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHarryView Question on Stackoverflow
Solution 1 - CssBłażej KliszView Answer on Stackoverflow
Solution 2 - CsszellioView Answer on Stackoverflow
Solution 3 - CssAgosView Answer on Stackoverflow