Псевдокласс :is()

Псевдокласс :is() — это функциональный CSS-псевдокласс, который принимает список селекторов в качестве аргумента и применяет стили к любому элементу, соответствующему хотя бы одному из перечисленных селекторов. Он позволяет сократить объём кода за счёт группировки повторяющихся правил, заменяя длинные цепочки селекторов, разделённых запятыми, на более компактную запись. Псевдокласс :is() поддерживается всеми современными браузерами, начиная с 2020–2021 годов, и входит в спецификацию CSS Selectors Level 4.

История и стандартизация

Псевдокласс :is() был введён в черновик спецификации CSS Selectors Level 4 (CSS4) под названием :matches(). Первоначально он реализовывался в браузерах с префиксами: :-webkit-any() (в WebKit и Blink) и :-moz-any() (в Firefox). В 2018 году спецификация была переработана, и псевдокласс получил окончательное название :is(), а также был изменён алгоритм вычисления специфичности. Стандарт был рекомендован Консорциумом Всемирной паутины (W3C) в 2021 году. В отличие от предыдущих версий, :is() не требует префиксов и поддерживается во всех актуальных версиях Chrome, Firefox, Safari и Edge.

Синтаксис и использование

Синтаксис псевдокласса :is() выглядит следующим образом:

``css :is(selector1, selector2, ...) { / стили / } ``

Внутри скобок перечисляются один или несколько селекторов, разделённых запятыми. Псевдокласс применяет стили к элементу, если он соответствует хотя бы одному из указанных селекторов. Например:

``css :is(h1, h2, h3) { color: navy; } ``

Это правило эквивалентно записи:

``css h1, h2, h3 { color: navy; } ``

Однако главное преимущество :is() проявляется при работе с комбинированными селекторами. Например, вместо:

``css section h1, section h2, section h3, section p { margin-top: 0; } ``

Можно написать:

``css section :is(h1, h2, h3, p) { margin-top: 0; } ``

Это сокращает объём кода и упрощает его поддержку.

Вложенные селекторы

Псевдокласс :is() может быть вложенным, то есть внутри :is() можно использовать другой :is(). Также он работает с любыми типами селекторов: классовыми, атрибутными, псевдоклассами и псевдоэлементами (кроме ::before и ::after). Например:

``css :is(.article, .post) :is(h1, h2) { font-weight: bold; } ``

Это применит стили к заголовкам h1 и h2 внутри элементов с классами .article или .post.

Специфичность

Одной из ключевых особенностей псевдокласса :is() является его влияние на специфичность CSS-правил. Специфичность селектора, содержащего :is(), определяется не по сумме специфичностей всех селекторов внутри, а по максимальной специфичности среди них. Это означает, что если внутри :is() есть селектор с высокой специфичностью (например, идентификатор #id), то всё правило получит такую же высокую специфичность, даже если остальные селекторы имеют низкую.

Пример:

``css :is(#header, .text) { color: red; } ``

Специфичность этого правила будет равна специфичности селектора #header (0,1,0,0), а не сумме (0,1,1,0). Это может привести к неожиданным переопределениям стилей, если не учитывать данный механизм.

Для сравнения, обычная запись через запятую:

```css

header, .text {

color: red; } ```

— имеет специфичность, вычисляемую отдельно для каждого селектора: для #header — (0,1,0,0), для .text — (0,0,1,0). При конфликте правил браузер выберет то, которое имеет большую специфичность для конкретного элемента.

Отличия от псевдокласса :where()

Псевдокласс :where() является аналогом :is(), но с одним важным отличием: его специфичность всегда равна нулю (0,0,0,0), независимо от селекторов внутри. Это делает :where() полезным для создания сбросов стилей или базовых правил, которые легко переопределить. В отличие от :is(), :where() не повышает специфичность, что даёт больше контроля над каскадом.

Применение

Псевдокласс :is() активно используется в современной веб-разработке для:

• Сокращения повторяющихся селекторов — особенно при работе с вложенными компонентами, где нужно стилизовать несколько типов элементов внутри одного контейнера.
• Упрощения медиа-запросов — например, для группировки селекторов внутри @media правил.
• Создания универсальных стилей — для элементов, которые могут появляться в разных контекстах (например, в заголовках статей, боковых панелях, футерах).
• Работы с псевдоклассами — :is(:hover, :focus) позволяет применить стили к элементу при наведении или фокусе без дублирования.

Пример использования в медиа-запросе:

``css @media (max-width: 768px) { :is(.sidebar, .footer) { display: none; } } ``

Ограничения и особенности

• Псевдокласс :is() не может содержать псевдоэлементы (::before, ::after), так как они не являются селекторами в полном смысле.
• Внутри :is() нельзя использовать селекторы, которые зависят от контекста, например, :has() (на момент написания статьи).
• При использовании :is() в комбинации с другими псевдоклассами (например, :not()) необходимо учитывать порядок вычисления.
• Браузеры, не поддерживающие :is() (например, Internet Explorer), игнорируют правило целиком, поэтому для обратной совместимости рекомендуется дублировать стили с обычными селекторами.

Примеры

Пример 1: Стилизация заголовков в статье

``css .article :is(h1, h2, h3, h4) { line-height: 1.2; margin-bottom: 0.5em; } ``

Пример 2: Группировка состояний

``css button :is(:hover, :focus) { outline: 2px solid blue; } ``

Пример 3: Вложенные списки

``css :is(ul, ol) :is(li, p) { font-size: 0.9em; } ``

Поддержка браузерами

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

• Google Chrome (версия 88+)
• Mozilla Firefox (версия 78+)
• Apple Safari (версия 14+)
• Microsoft Edge (версия 88+)
• Opera (версия 75+)

Поддержка в мобильных браузерах также широкая. Для старых версий браузеров (например, Chrome 87 и ниже) требуется использование префиксных вариантов :-webkit-any() и :-moz-any().

Источники

• Спецификация CSS Selectors Level 4 (W3C)
• MDN Web Docs: :is() CSS pseudo-class
• Can I Use: :is() CSS pseudo-class
• Статья «CSS :is() and :where() pseudo-classes» на CSS-Tricks
• Документация по CSS от Mozilla Developer Network