`:is() și :where()` în CSS

Selectori și reguli de bază Chrome 88, Firefox 78, Safari 14

Grupează mai mulți selectori într-unul singur; :is() păstrează specificitatea celui mai puternic argument, :where() are specificitate zero.

Sintaxă CSS

:is(h1, h2, h3) a { color: #2563eb; }
:where(ul, ol) li { margin-bottom: 4px; }
article :is(h2, h3):hover { text-decoration: underline; }

Ce face `:is() și :where()`

:is() și :where() primesc o listă de selectori și se potrivesc cu orice element care corespunde cel puțin unuia dintre ei. În loc să scrii header a, main a, footer a, scrii :is(header, main, footer) a.

Diferența dintre ele este doar specificitatea:
• :is() ia specificitatea celui mai specific selector din paranteză (:is(#meniu, .link) valorează cât un ID, chiar dacă elementul se potrivește doar cu clasa).
• :where() are mereu specificitate 0, așa că regulile scrise cu el se suprascriu foarte ușor. Este ideal pentru stiluri de bază, resetări și biblioteci.

Ambele folosesc o listă de selectori tolerantă (forgiving): dacă unul dintre selectori nu este valid sau nu este înțeles de browser, este ignorat, iar restul listei funcționează în continuare. La o listă obișnuită separată prin virgulă, un singur selector invalid anulează toată regula.

Valori uzuale

Valoare	Descriere
`:is(A, B, C)`	Se potrivește cu elementele care corespund lui A, B sau C; specificitatea = cea mai mare din listă.
`:where(A, B, C)`	Aceeași potrivire ca :is(), dar cu specificitate 0.
`:is(...) X`	Folosit ca prefix: X aflat în interiorul oricăruia dintre elementele din listă.
`X:is(...)`	Folosit ca filtru: X care este în același timp și unul dintre selectorii din listă.

Exemple

Exemplul 1: Titlurile din articol, scrise o singură dată

Fără :is() ar trebui să repeți prefixul .articol pentru fiecare nivel de titlu.

/* În loc de .articol h2, .articol h3, .articol h4 */
.articol :is(h2, h3, h4) {
  color: #0f172a;
  margin-top: 2rem;
  line-height: 1.25;
}

.articol :is(h2, h3, h4):hover {
  color: #2563eb;
}

Efect vizual în browser

În articolul „Ghid de vizitare a Iașului”, toate titlurile h2, h3 și h4 sunt bleumarin, cu spațiu de 2rem deasupra; la trecerea cu mouse-ul, titlul peste care stă cursorul devine albastru.

Exemplul 2: Stiluri de bază ușor de suprascris cu :where()

Regula cu :where() are specificitate 0, așa că o simplă clasă o înlocuiește fără !important.

/* Stil implicit pentru listele din conținut */
:where(.continut) :where(ul, ol) {
  padding-left: 1.5rem;
  color: #334155;
}

/* O clasă simplă câștigă, deși e mai „scurtă” */
.lista-fara-stil {
  padding-left: 0;
  list-style: none;
}