4 ноября 2020 года .

Функциональные псевдоклассы is() и where()

Псевдокласс match-any :is() - это функциональный псевдокласс, принимающий <forgiving-selector-list> в качестве единственного аргумента.

Он сопостовляется с любым селектором из переданного списка, но его специфичность равна наибольшей среди элементов списка. Поясним на примере.

С первого взгляда можно подумать что это просто синтаксический сахар :is(.a, .b) .c === .a .c, .b .c. Однако :is(#id, .b) .c !== #id .c, .b .c.

То есть вот в такой ситуации цвет будет красный:

<div class="a">Lorem</div>
<style>
  :is(#id, .a) {color: red;}
  .a {color: blue;}
</style>

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

Иллюстрируем тем же примером, цвет будет синий:

<div class="a">Lorem</div>
<style>
  :where(#id, .a) {color: red;}
  .a {color: blue;}
</style>

Оба псевдокласса поддерживаются в FireFox начиная c 78 версии и в Safari c 14.