Эти, казалось бы, небольшие дополнения к синтаксису селекторов CSS окажут большое влияние.
При написании 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()
:where()
Встречайте :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()
сильно расходятся. Чтобы узнать больше о специфике, см. модуль специфики в разделе «Изучаем 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