:where(): общий стиль с нулевой специфичностью аргументов
Where объединяет альтернативы селектора, но не добавляет специфичности за счёт себя и своего списка. Это удобно для базового оформления, которое легко переопределить в компоненте.
Назначение
Where объединяет альтернативы селектора, но не добавляет специфичности за счёт себя и своего списка. Это удобно для базового оформления, которое легко переопределить в компоненте.
Как это работает
Части селектора снаружи where по-прежнему имеют собственную специфичность. Если обернуть весь селектор в where, его вклад в специфичность будет нулевым; остальные правила каскада всё равно продолжают действовать.
Пример
<style>:where(.example p){color:#315b45}.highlight{color:#8a2445}</style>
<div class="example"><p>Базовый абзац.</p><p class="highlight">Абзац с отдельным классом.</p></div>Что должно получиться
Первый абзац использует базовый цвет, второй — цвет класса highlight. Правило с классом не требует длинного селектора для преодоления специфичности базы.
Граница применения и частая ошибка
Нулевая специфичность не отменяет происхождение стилей, слои каскада и important. Не превращайте where в средство угадывания: сначала установите, на каком этапе каскада выбирается правило.
Самостоятельная проверка
Поменяйте местами два правила, оставив остальное неизменным, и объясните результат. Затем замените where на is и повторите сравнение. Укажите, какие части селектора дают вклад в специфичность.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.