Новые функциональные селекторы псевдоклассов CSS :is() и :where().

Эти, казалось бы, небольшие дополнения к синтаксису селекторов CSS окажут большое влияние.

Adam Argyle

При написании CSS иногда могут возникнуть длинные списки селекторов для нескольких элементов с одинаковыми правилами стиля. Например, если вы хотите настроить цвет любых тегов <b> , находящихся внутри элемента заголовка, вы можете написать:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Вместо этого вы можете использовать :is() и улучшить разборчивость, избегая при этом длинного селектора:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

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

Бесконечная визуализация до и после использования :is()

Совместимость с браузером

:is()

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

• 88
• 88
• 78
• 14

Источник

:where()

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

• 88
• 88
• 78
• 14

Источник

Встречайте :is() и :where()

Это функциональные селекторы псевдоклассов. Обратите внимание на () в конце и на то, как они начинаются с : . Думайте об этом как о динамических вызовах функций во время выполнения, которые соответствуют элементам. При написании CSS они дают вам возможность группировать элементы в середине, начале или конце селектора. Они также могут изменить специфичность, давая вам возможность свести на нет или увеличить специфичность.

Группировка селекторов

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

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Каждый из приведенных выше примеров селекторов демонстрирует гибкость этих двух функциональных псевдоклассов. Чтобы найти области вашего кода, которые могут извлечь выгоду из :is() или :where() , ищите селекторы с несколькими запятыми и повторением селекторов.

Использование простых и сложных селекторов с :is()

Чтобы освежить знания о селекторах, ознакомьтесь с модулем селекторов на сайте Learn CSS . Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту возможность:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Обычно при использовании , для создания списка селекторов, если какой-либо из селекторов недействителен, все селекторы становятся недействительными, и список не сможет соответствовать элементам. То есть они не прощают ошибок. :is() и :where() прощают ошибки и могут вывести вас из тупика !

На данный момент :is() и :where() синтаксически взаимозаменяемы. Пришло время посмотреть, чем они отличаются.

Разница между :is() и :where()

Когда дело доходит до специфичности, :is() и :where() сильно расходятся. Чтобы узнать больше о специфике, см. модуль «Специфика» в разделе «Изучаем CSS» .

Суммируя

• :where() не имеет конкретики.
  :where() стирает всю специфичность списка селекторов, передаваемого в качестве функциональных параметров. Это первая в своем роде функция выбора.
• :is() учитывает специфику своего наиболее конкретного селектора.
  :is(a,div,#id) имеет показатель специфичности идентификатора, равный 100 баллам.

Выбор селектора с наивысшей специфичностью из списка был для меня проблемой только тогда, когда я слишком увлекался группировкой. Мне всегда удавалось улучшить разборчивость, перемещая селектор с высокой специфичностью в отдельный селектор, где он не имел бы такого большого влияния. Вот пример того, что я имею в виду:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

С :where() я жду, когда библиотеки предложат версии без какой-либо конкретики. Конкуренция за специфичность между авторскими стилями и библиотечными стилями может подойти к концу. При написании CSS не будет никакой специфики, с которой можно было бы конкурировать. CSS уже довольно давно работает над такой функцией группировки, она уже здесь, и это все еще по большей части неисследованная территория. Получайте удовольствие от создания небольших таблиц стилей и удаления запятых.

Фото Маркуса Винклера на Unsplash