CSS селектор :where() — нульова специфічність

CSS псевдоклас :where() робить те саме, що :is(), але має нульову специфічність.

правити

Загальний опис

Це головний інструмент для базових стилів і бібліотек. Правило, написане через :where(), перебиває будь-який пізніший селектор — навіть найпростіший клас.

Тобто автор сторінки може перевизначити твої стилі одним .my-class, і йому не доведеться воювати зі специфічністю чи ліпити !important.

правити

Порада

Пишучи CSS-бібліотеку, загортай базові селектори у :where() — так користувачі перевизначать їх без болю.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:where(<selector-list>)

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
where	88+	78+	14+	74+	88+	-

Підтримка: мобільні переглядачі

Переглядач
where	88+	yes	yes	14+

Приклади

+ запропонувати свій приклад у пісочниці

<p class="lead">Цей абзац матиме відступ, попри скидання.</p>

:where(h1, h2, h3, p, ul) {
    margin-block: 0;
}

/* один клас легко перебиває правило вище */
.lead {
    margin-block: 1rem;
}