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

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

История и появление

Псевдокласс :where() был предложен в рамках развития модуля CSS Selectors Level 4, который начал разрабатываться рабочей группой CSS (CSS Working Group) при Консорциуме Всемирной паутины (W3C) в 2010-х годах. Основной целью было создание инструмента для снижения избыточности кода и упрощения управления каскадностью. Первоначальная черновая версия спецификации была опубликована в 2018 году, а окончательная рекомендация (W3C Recommendation) — 7 ноября 2018 года. Поддержка :where() была реализована в большинстве современных браузеров (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge) начиная с 2020–2021 годов.

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

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

``css :where( <complex-selector-list> ) { / стили / } ``

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

Примеры

1. Применение стилей к нескольким элементам:

``css :where(h1, h2, h3) { color: blue; } ` Этот код сделает все заголовки <h1>, <h2> и <h3>` синими.

1. Комбинация с другими селекторами:

``css article :where(.highlight, .important) { background-color: yellow; } ` Стили будут применены к элементам с классами .highlight или .important, находящимся внутри <article>`.

1. Вложенное использование:

``css :where(:where(div, span), :where(p, a)) { font-weight: bold; } ` Все элементы <div>, <span>, <p> и <a>` станут жирными.

Специфичность и отличие от :is()

Главное отличие :where() от :is() заключается в том, как вычисляется специфичность. Специфичность — это механизм CSS, определяющий, какие стили будут применены при конфликте правил. Она рассчитывается на основе веса селекторов (идентификаторов, классов, тегов).

• Псевдокласс :is(): специфичность равна специфичности самого специфичного селектора в списке. Например, :is(#id, .class) будет иметь специфичность идентификатора (0,1,0,0), даже если элемент соответствует только классу.
• Псевдокласс :where(): специфичность всегда равна нулю (0,0,0,0), независимо от того, какие селекторы входят в список. Это позволяет легко переопределять стили, заданные с помощью :where(), даже менее специфичными селекторами.

Пример сравнения

```css / Стили через :is() / :is(h1, .special) { color: red; }

/ Стили через :where() / :where(h1, .special) { color: blue; }

/ Переопределение / h1 { color: green; } ```

В этом примере для элемента <h1>:

• Стиль из :is() (красный) будет переопределён стилем h1 (зелёный), так как специфичность :is() равна специфичности .special (0,0,1,0), что выше, чем у h1 (0,0,0,1), но h1 стоит ниже в коде.
• Стиль из :where() (синий) будет переопределён стилем h1 (зелёный), так как специфичность :where() равна нулю, а h1 имеет специфичность (0,0,0,1).

Таким образом, :where() предоставляет разработчику больше контроля над каскадностью, позволяя задавать базовые стили, которые легко переопределять.

Применение

Псевдокласс :where() используется в следующих сценариях:

• Сброс стилей (reset): для задания начальных значений, которые должны легко переопределяться. Например, :where(h1, h2, h3) { margin: 0; } устанавливает нулевые отступы, которые можно изменить в любом другом правиле.
• Упрощение сложных селекторов: когда нужно применить стили к нескольким элементам, но не хочется повторять общий контекст. Например, :where(header, footer) :where(nav, .menu) { display: flex; }.
• Создание утилитарных классов: в CSS-фреймворках (например, Tailwind CSS) :where() используется для создания классов с низкой специфичностью, чтобы их можно было легко переопределять пользовательскими стилями.
• Условное форматирование: при работе с динамическими классами или атрибутами, когда нужно применить стили к нескольким возможным состояниям.

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

По состоянию на 2025 год псевдокласс :where() поддерживается всеми современными браузерами:

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

Поддержка в мобильных браузерах также широка: Chrome для Android, Safari для iOS, Samsung Internet. В Internet Explorer :where() не поддерживается.

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

• Не поддерживается в старых браузерах: для проектов, требующих поддержки Internet Explorer или старых версий браузеров, использование :where() невозможно без полифилов.
• Нулевая специфичность: это может быть как преимуществом, так и недостатком. Если разработчик хочет, чтобы стили были устойчивы к переопределению, :where() не подходит.
• Сложность отладки: из-за нулевой специфичности может быть сложно понять, почему определённые стили не применяются, особенно в больших проектах.
• Нельзя использовать с псевдоэлементами: :where() не может содержать псевдоэлементы (например, ::before или ::after) в списке селекторов.

Интересные факты

• Псевдокласс :where() часто называют «нулевым псевдоклассом» из-за его специфичности.
• В спецификации CSS Selectors Level 4 также существует псевдокласс :not(), который имеет аналогичное поведение со специфичностью, но отрицает селекторы.
• :where() может быть использован для создания «слоёв» стилей, где каждый слой имеет одинаковую специфичность, что упрощает управление каскадностью.

Источники

• W3C. "CSS Selectors Level 4". W3C Recommendation, 7 November 2018.
• Mozilla Developer Network (MDN). ":where() CSS pseudo-class".
• CSS-Tricks. "A Guide to the :where() CSS Pseudo-class".
• Can I Use. "CSS :where() pseudo-class".