Style element if contains a certain word, CSS3 only

Question

I want to style an element based on the text that is written inside of it.

<div class="target-element">
  Cat
</div>

And if I was guessing how the CSS should look:

.target-element[content="Cat"] {
    background-color: red;
}

This doesnt work of course ^^ , which is where the help comes in.

You can't do it with pure CSS, you need to use JQuery with `:contains()` — Simon M., Oct 27 '15 at 08:46
i guess you can use :empty pseduo in CSS but not any content . I am going to agree with @SimonM. — semuzaboi, Oct 27 '15 at 08:54

score 2 · Answer 1 · edited Oct 27 '15 at 09:43

2

You can set a data-* attribute to the div and catch that to change the css as

div[data-color="red"] {
    color: red;
}

<div class="target-element" data-color="red">
  Cat
</div>

edited Oct 27 '15 at 09:43

Eric

answered Oct 27 '15 at 08:48

Tushar Gupta

The element should change its color to red based on the word 'Cat'. Without 'Cat', the text is simply black. – Ian Steffy Oct 27 '15 at 08:59

Eric · Accepted Answer · 2017-04-01T20:30:59.963

2

As far as I know there is no way to do this only with css.

var content = $(".target-element").text();
if (content == "Cat") {
    content.css("background", "red");
}

edited Apr 01 '17 at 20:30

answered Oct 27 '15 at 08:49

Eric

2 Answers2