От автора: еще в 2019 году я поделился тем, как селектор CSS :is() упростит процесс написания CSS. Чего я не знал тогда и узнал совсем недавно, так это трех важных фактов о CSS: is().
Вот эти три факта:
Селекторный список
Специфика :is() заключается в том, что это более высоко специфичный аргумент.
:is() не работает с селекторами псевдо-элементов (пока)
Давайте посмотрим, что это значит.
1. Селекторный список
Что, если вы включите селектор, который является чистой тарабарщиной внутри :is()? Будет ли набор правил объявлен недействительным или как?
p:is(.foo, #bar, $css:rocks) { color: hotpink;
}К счастью, :is() не требователен: часть — которая является недействительным селектором CSS — просто игнорируется, сохраняя при этом остальную часть списка селектора на месте. Таким образом, используя приведенный выше фрагмент, оба и p.foo и p#bar будут окрашены цветом hotpink.
Если вы попробуете сделать это без :is(), весь набор правил станет недействительным. В приведенном ниже фрагменте ни один из абзацев не будет окрашен в hotpinkс в связи с тем, что неверный селектор $css:rocks делает недействительным весь список селекторов.
p { font-family: sans-serif;
} p.foo, p#bar, p$css:rocks { /* This whole rule-set is declared invalid */ color: hotpink;
}Обратите внимание, что к абзацам будет применено font-family: sans-serif, поскольку игнорируется только недопустимый набор правил.
В ближайшем будущем это поведение больше не будет иметь место, поскольку CSSWG намеревается изменить эти правила таким образом, чтобы недопустимый селектор просто игнорировался, а не делал недействительным весь список селекторов. Соответствующая проблема CSS: 3264
2. Специфика :is() заключается в том, что это более высоко специфичный аргумент.
Взгляните на код ниже. Какой цвет будет у p.foo?
p:is(.foo, #bar, $this:invalid) { color: hotpink;
} p.foo { color: lime;
}Он будет не lime, а hotpink! Это потому, что при расчете специфичности, специфичность псевдо-класса :is() заменяется спецификой его наиболее высоко специфичного аргумента.
p.foo имеет специфичность (0,1,1)
p:is(.foo, #bar) имеет специфичность (1,0,1)
Так как p:is(.foo, #bar) имеет более высокую специфичность, здесь он «выиграет».
Псевдо-классы :not() и :has() также имеют свою специфику, которая рассчитывается таким же образом.
Если вы не хотите, чтобы это повлияло на ваш код, вы можете использовать :where() вместо :is(). Он работает точно так же как :is(), но всегда будет иметь специфику 0. Вы можете ловко обернуть это вокруг других селекторов, чтобы отменить их специфичность. Подумайте, например о :where(:not(…)).
Хотя я бы не рекомендовал делать так, но вы могли бы сделать что-то вроде :is(#bump#up#the#spe#ci#fi#city#yo, .foo) для переопределения более конкретных селекторов, чем .foo…
3. :is() не работает с селекторами псевдо-элементов (пока)
Если вы прочтете определение :is() вы увидите, что он принимает «список селекторов», который представляет собой список простых, составных или сложных селекторов, разделенных запятыми.
При поиске простых селекторов следует обратить внимание на одну интересную вещь:
Селектор типа, универсальный селектор, селектор атрибутов, селектор класса, селектор идентификатора или псевдокласс — это простые селекторы.
Видите? Селекторы псевдо-элементов не включены в этот список. В результате, :is() не работает с селекторами псевдо-элементов, такими как ::before, ::after, ….
В будущем это станет возможным, но не сейчас. Соответствующая проблема CSS: 2284
Знание этих трех фактов об :is() наверняка поможет вам лучше понять его и сделать его использование более увлекательным!
Автор: Bramus Van Damme
Источник: www.bram.us
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен