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.
