0

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.

lemontree
  • 13
  • 1
  • 4
  • Does this answer your question? [Select text node with CSS](https://stackoverflow.com/questions/15641889/select-text-node-with-css) – BugsArePeopleToo Jan 28 '20 at 18:05

1 Answers1

0

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.

yerme
  • 810
  • 5
  • 15
  • It's just a simple example, really I have to apply it to a dynamic content where I do not have control over html. So spans with classes are not the option. Also :nth-of-type is not an option because, for example, the word "Yellow" can be in the first place as well as in the second. My question is more: can I target a specific word (for example, "Yellow") through css? Like something img[title="flower"] (in this case, I'm targeting the image that has a title "flower")? – lemontree Jan 28 '20 at 17:59
  • Ah, ok. I'm not aware of any ability through CSS alone that can target text. If you have access to js/jquery, you can use :contains https://stackoverflow.com/questions/7321896/jquery-find-element-by-text – yerme Jan 28 '20 at 18:03