How to target a specific text in the span with css

Question

I have a html:

<div class="test>

<span>Yellow</span>
<span>Blue</span>
<span>Purple</span>

</div>

I want spans that contain texts "Yellow" and "Purple" to hide. Can I do it with CSS? Maybe attributes? Spans don't have classes or, in other words, they can't have them.

Answer 1

You can add classes to your spans:

 .test { display: flex; justify-content: center; align-items: center; width: 80vw; margin: 0 auto; } .test span { height: 20px; flex: 1; margin: 0 1rem; color: white; text-align: center; } .test span.purple { background: purple; } .test span.red { background: red; }

 <div class="test"> <span class="purple">purple</span> <span class="red">red</span> <span class="purple">purple</span> <span class="red">red</span> </div>

Or you can target them with :nth-of-type

 .test span:nth-of-type(1) {
     // this gets you the first one
 }

 .test span:nth-of-type(2) {
     // this gets you the second one
 }

etc.