Skupinové selektory :is() a :where()

Tyto dva selektory (formálně se jedná o pseudotřídy) patří k těm novějším. Stručně řečeno obsahují v sobě skupinu selektorů a vybírají prvky vyhovující libovolnému z nich.

:is()

Uvnitř závorek obsahuje skupinu selektorů a vyhoví mu všechny prvky, které vyhoví libovolnému z nich. Například obarvení všech nadpisů modrou barvou by zajistilo pravidlo:

:is(h1, h2, h3, h4, h5, h6) {
    color: blue;
}

Možná vás právě napadlo, že to je zbytečnost, protože stejného výsledku dosáhneme jednodušším pravidlem:

h1, h2, h3, h4, h5, h6 {
    color: blue;
}

V případě jednoduchých selektorů je to samozřejmě pravda. S jejich rostoucí složitostí ale roste užitečnost tohoto mechanismu. Řekněme, že bych chtěl nějak upravit prvky <em> a <i> v nadpisech. Tradičním způsobem bych musel vyjmenovat všechny možné kombinace:

h1 em,
h1 i,
h2 em,
h2 i,
...

Pomocí :is() to půjde o dost snadněji:

:is(h1, h2, h3, h4, h5, h6) :is(em, i) {
    ...
}

Kdykoli budete psát několik selektorů, které mají společnou část a liší se jen v některých prvcích nebo třídách, zvažte, zda by vám :is() neušetřilo práci.

Dá se používat samostatně, jak jste právě viděli, nebo připojit k jinému selektoru. Například sekce, které mají přiřazenu třídu chyba nebo varovani, by vybral selektor:

section:is(.chyba, .varovani) {
    ...
}

Jsou-li selektory uvnitř :is() nesourodé, dávejte si pozor na konkrétnost (aneb specifičnost), podle které se posuzuje, které pravidlo má přednost. Konkrétnost :is() se totiž rovná nejkonkrétnějšímu ze selektorů, které jsou v něm obsaženy. Proto například při deklaraci:

:is(#banner, p) {
    color: red;
}

p {
    color: blue;
}

budou všechny odstavce <p> na stránce červené. Vyhovují oběma pravidlům, ale v tom prvním jsou v :is() s identifikátorem, takže toto pravidlo má sílu identifikátoru a dostane přednost, i když se uvnitř :is() pro jejich výběr použil jiný selektor. Tohle dokáže překvapit, proto doporučuji zařazovat do jednoho :is() vždy stejně konkrétní identifikátory.

:where()

Pseudotřída :where() funguje úplně stejně jako :is(). Jediný rozdíl spočívá v posledních odstavcích, protože konkrétnost :where() je vždy nulová, bez ohledu na selektory, které obsahuje. Proto se hodí pro různé CSS knihovny a frameworky, kde umožňuje jejich uživatelům snadno „přebít“ knihovní pravidla.

Když otočím pořadí pravidel a vyměním :is() za :where(), budou odstavce pro změnu modré:

p {
    color: blue;
}

:where(#banner, p) {
    color: red;
}

Opět se na ně vztahují obě pravidla, ale druhé má nulovou specifičnost, takže vyhraje první z nich.