Как указать целевой c текст в диапазоне с css - PullRequest
Новая
       11

Как указать целевой c текст в диапазоне с css

0 голосов
/ 28 января 2020

У меня есть html: 

<div class="test>

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

</div>

Я хочу, чтобы пролеты, содержащие тексты «Желтый» и «Фиолетовый», были скрыты. Могу ли я сделать это с CSS? Может быть, атрибуты? Пролеты не имеют классов или, другими словами, они не могут иметь их.

1 Ответ

0 голосов
/ 28 января 2020

Вы можете добавить классы к своим пролетам: 

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

Или вы можете выбрать для них: 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
 }

et c.

...