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

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

От автора: при написании CSS иногда можно получить длинные списки селекторов для нацеливания на несколько элементов с одинаковыми правилами стиля. Вместо этого можно использовать новые функциональные селекторы псевдо-классов.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Псевдо-классы :is и :where поддерживаются в Chromium (> = 88), Firefox (> = 78) и Safari (> = 14). См. таблицу совместимости браузеров MDN для получения дополнительной информации. Некоторые старые версии браузеров поддерживают селектор :is() как :matches() или -webkit-any(). Для получения дополнительной информации см. страницу :is() в MDN.

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

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

Группировка

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

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

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

Вот несколько примеров простых и сложных селекторов, которые помогут проиллюстрировать эту способность:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

:where() не имеет специфики. :where() подавляет всю специфичность в списке селекторов, переданных в качестве функциональных параметров. Это первая в своем роде функция выбора.

:is() принимает специфику своего самого главного селектора. :is(a, div, # id) имеет показатель специфичности идентификатора.

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

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

Автор: Adam Argyle

Источник: web.dev

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.