Улучшенные приемы CSS: использование псевдоэлементов :is(), :where() и :has().

:is()Элементы , , :where()и :has() псевдо- — очень мощные инструменты в CSS для стилизации элементов. Они были представлены в спецификации CSS Selectors Level 4. Они позволяют нам применять стили к любому элементу, который соответствует определенным критериям, таким как тип элемента, положение элемента и потомки элемента.

1. :is()

:is()Псевдоклассы можно использовать для поиска элементов на основе комбинации селекторов. Он принимает массив селекторов в качестве аргумента и возвращает значение, если элемент соответствует любому из селекторов true.

Например, если вы хотите настроить таргетинг на все элементы с классом isPinkor , вы можете использовать псевдокласс.isPretty:is()

HTML/CSS

div:is(.isPink, .isPretty) {
  color: pink;
}

<div class="isPink">
  <p>
    Pink
  </p>
</div>
<div class="isPretty">
  <p>
    Pretty
  </p>
</div>
<div>
  <span>
    Not Pretty
  </span>
</div>

При рендеринге в браузере это будет выглядеть так:

2. :где()

:where()Псевдоклассы можно использовать для поиска элементов в зависимости от условий. Он принимает условие в качестве аргумента и возвращает значение, когда элемент соответствует условию true.

Например, если вы хотите настроить таргетинг на все элементы, имена классов которых boldначинаются с , вы можете использовать для этого псевдокласс :where()the:

Добавление следующего псевдокласса в приведенный выше файл CSS приведет к тому, что любой дочерний элемент с классом CSS boldstarting будет отображаться жирным шрифтом.

div:where([class^="bold"]) {
  font-weight: bold;
}

HTML

<div class="isPink">
  <p>
    Pink
  </p>
</div>

<div  class="bold_text isPretty">
  <p>
    Pretty
  </p>
</div>

При рендеринге в браузере это будет выглядеть так:

Похоже, что псевдоэлементы :is() и :where() делают то же самое. Однако псевдоэлемент :is() используется для сопоставления элементов со списком селекторов, а псевдоэлемент :where() используется для сопоставления элементов с условием.

3. :есть()

:has()Псевдоклассы можно использовать для позиционирования элементов на основе элементов-потомков. Он принимает селектор в качестве аргумента и возвращает значение, если у элемента есть потомок, соответствующий селектору true.

Например, если вы хотите настроить таргетинг на все элементы, содержащие элемент, вы можете использовать для этого класс :has()pseudo-. На этом этапе в нашем HTML ничего не меняется. Это добавление CSS делает элемент фиолетовым фоном.

div:has(p) {
  background-color: purple !important;
}

Вот как сейчас выглядит наша веб-страница:

Эти новые псевдоэлементы являются незаменимым инструментом для любого набора навыков CSS. Немного попрактиковавшись, вы сможете уверенно использовать их в своих проектах.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .