Новые псевдоклассы в CSS — is() и where()

, Александр Мышов

Вчера в рассылке Web Platform News пришёл апдейт про поддержку новых псевдоклассов — "CSS :is() and :where() are coming to browsers".

Псевдоклассы :is() и :where предназначены для написания CSS-правил без дублирования селекторов. Они отличаются между собой только специфичностью. Специфичность :is() определяется наиболее специфичным селектором, переданным в аргументах. У :where() специфичность всегда нулевая. :where() полезен для создания дефолтных правил, которые могут перекрываться другими правилами без увеличения специфичности селекторов и без использования !important.

Пример использования :is():

/* До */
.embed .button:hover,
.attachment .button:hover {
  opacity: 1;
}

/* После */
:is(.embed, .attachment) .button:hover {
  opacity: 1;
}

Поддержка новых псевдоклассов уже есть в Safari Tech Preview 106 и Firefox Beta 78. В Chrome их реализация пока находится за флагом. Для ускорения внедрения можно поставить звезду соответствующим тикетам в баг-трекере Chromium (ссылки можно найти в оригинальном посте).

https://webplatform.news/issues/2020-06-04

← На главную