CSS selector based on element text?

Question

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.

score 141 · Answer 1 · edited Sep 11 '15 at 23:35

141

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.

edited Sep 11 '15 at 23:35

the Tin Man

158,662
42
215
303

answered Mar 26 '11 at 10:39

Błażej Klisz

1,730
2
16
16

10

This worked for me. Ended up using something like: `$("div:contains('Text')") .closest("div.parent_div") .css("background", "#555");` – JoshP May 20 '15 at 14:12
39

@dineshygv No it should not be marked as the answer. The question asked for a CSS Selector. This answer is a jQuery selector which is entirely different and adds the dependency of using jQuery. Proper CSS Selectors do not require any special library, only conformance to CSS & DOM standards by the browser. – uchuugaka Apr 05 '17 at 03:07
2

Unbelievably, this works in Rails unit tests `assert_select '.text-muted:contains("Total Raised")', 'Total Raised'`. http://guides.rubyonrails.org/v5.0/testing.html#testing-views I did not expect it to because I thought the unit tests use Ruby CSS selectors, not JQuery. – Chloe Dec 26 '17 at 04:38

score 93 · Accepted Answer · answered Mar 26 '11 at 10:29

93

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.

answered Mar 26 '11 at 10:29

zellio

31,308
1
42
61

7

Try :empty css selector. Worked out for me. – Dmitrii Malyshev Aug 03 '16 at 16:05
1

@DmitriiMalyshev Link to the description of the `:empty` selector: https://www.w3schools.com/cssref/sel_empty.asp – sebisnow Sep 17 '19 at 11:28

score 14 · Answer 3 · edited May 23 '17 at 11:33

14

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 {...}

edited May 23 '17 at 11:33

Community

1
1

answered Mar 26 '11 at 10:29

Agos

18,542
11
56
70

23

This can be confusing. The selector being described is going off of the class on the element, not the text inside of it. Yes, it says "You will have to use additional markup", but with a cursory glance, that could easily be missed. – krillgar Mar 09 '16 at 20:11

CSS selector based on element text?

3 Answers3

Linked

Related