Справочник HTML & CSS

:is()

Срабатывает, если элемент подходит под любой селектор из списка, — способ сократить длинные списки селекторов.

Синтаксис

:is(list) { … }

Параметры

Параметр	Тип	Описание
list	selectors	Селекторы через запятую; ошибочный пропускается, а не ломает всё правило.

Примеры

Одно правило вместо четырёх сочетаний:

<style>
  :is(article, aside) :is(h3, h4) { color: darkorange; }
</style>
 
<article><h3>Article heading</h3></article>
<aside><h4>Sidebar heading</h4></aside>
<h3>An ordinary heading</h3>

Примечания

Специфичность :is() равна специфичности самого сильного аргумента: :is(#id, p) весит как id. Если нужна нулевая специфичность, берите :where().

См. также

:where() — Работает как `:is()`, но всегда имеет нулевую специфичность.
A, B — Список селекторов: одно правило для нескольких селекторов через запятую.
:not() — Выбирает элементы, которые не подходят ни под один из селекторов в скобках.

В учебнике

Современные селекторы — Селекторы :is(), :where(), :not() со списком и :has() — как сократить длинные селекторы и выбрать родителя по его содержимому.

Спасибо, что читаете!