CSS селектор :is() — скорочення списку селекторів

CSS псевдоклас :is() збігається з елементом, якщо той підходить хоч під один селектор зі списку в дужках.

правити

Загальний опис

Це насамперед засіб проти повторів. Замість трьох рядків article h1, article h2, article h3 пишеш article :is(h1, h2, h3) — і читати легше, і правити в одному місці.

Виграш зростає з вкладеністю: :is(article, section, aside) :is(h1, h2) замінює шість комбінацій.

правити

Порада

Якщо не хочеш, щоб селектор «важчав», бери :where() — він робить те саме, але має нульову специфічність.

автор: NagarD правити

Нотатка

Специфічність :is() дорівнює найважчому селектору в дужках. Тобто :is(#id, p) важить як #id, навіть коли збіг стався по p.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:is(<selector-list>)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
is	88+	78+	14+	74+	88+	-

Підтримка: мобільні переглядачі

Переглядач
is	88+	yes	yes	14+

Приклади

+ запропонувати свій приклад у пісочниці

<article><h2>Заголовок статті</h2></article>
<section><h2>Заголовок секції</h2></section>

:is(article, section, aside) :is(h1, h2, h3) {
    color: #0172ad;
    margin-top: 1.5em;
}