Pseudoklasa CSS :where()

Pseudoklasa CSS :where() przyjmuje jako argument listę selektorów rozdzielonych przecinkami i wybiera każdy element pasujący do każdego z tych selektorów. Działa tak samo, jak pseudoklasa :is(), tylko nie liczy się do precyzja całego selektora.

W najprostszej pojedynczej postaci pod względem wybieranych elementów pseudoklasa :where() niczym nie różni się od zwykłej listy selektorów, np. dwie poniższe reguły są pod tym względem równoważne:

:where(p, div) {color: green;}
p, div {color: green;}

Przykład użycia :where()

Głównym zastosowaniem pseudoklasy :where() jest upraszczanie długich grup selektorów. Powiedzmy na przykład, że na stronie używamy różnego rodzaju nagłówków – h1-h4 – które mogą znajdować się w różnych elementach, np. header i footer.

Aby zdefiniować styl dla każdego z tych nagłówków w każdym z wymienionych elementów, możemy napisać taką regułę:

header h1,
header h2,
header h3,
header h4,
footer h1,
footer h2,
footer h3,
footer h4 {
  color: green;
}

Pseudoklasa :where() w takim przypadku zaoszczędzi nam bardzo dużo pracy. Poniższy reguła jest równoważna z powyższą:

:where(header, footer) :where(h1, h2, h3, h4) {
  color: green;
}

Najpierw zostanie wybrany pierwszy selektor z pierwszej grupy, a następnie zostanie wybrany pierwszy selektor z drugiej grupy, „tworząc” selektor header h1. Następnie zostanie wybrany pierwszy selektor z pierwszej grupy i drugi selektor z drugiej grupy, „tworząc” selektor footer h2 itd. aż do końca selektorów z drugiej grupy.

Potem zostanie wybrany drugi selektor z pierwszej grupy i pierwszy selektor z drugiej grupy, „tworząc” selektor footer h1 itd.

Precyzja selektora

Pseudoklasa :where() ma zerową precyzję selektora, tzn. nie zmienia ogólnej precyzji selektora, w którym została użyta.

Pod tym względem pseudoklasa :where() różni się od pseudoklasy :is()(), która działa bardzo podobnie, ale wlicza się w precyzję selektora, w którym została użyta.

Składnia :where()

Składnia pseudoklasy :where():

:where(lista selektorów rozdzielonych przecinkami) {...}

Pseudoklasa :where() przyjmuje tzw. wybaczającą listę selektorów, tzn. jeśli którykolwiek z selektorów jest nieprawidłowy, zostaje on zignorowany, a pozostałe zostają normalnie użyte.