Pseudoklasa CSS :is() przyjmuje jako argument listę selektorów rozdzielonych przecinkami i wybiera każdy element pasujący do każdego z tych selektorów.
W najprostszej pojedynczej postaci pod względem wybieranych elementów 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:
Przykład użycia :is
Głównym zastosowaniem pseudoklasy :is()
jest upraszczanie długich selektorów grupowych. 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. section
, nav
, article
i aside
, 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łę:
Pseudoklasa :is()
w takim przypadku zaoszczędzi nam bardzo dużo pracy. Poniższy reguła jest równoważna z powyższą:
Działanie selektora w tej regule polega na wybieraniu kolejno wszystkich elementów z każdej grupy i łączeniu ich. Na przykład, najpierw zostanie wybrany pierwszy selektor z pierwszej grupy, a następnie zostanie wybrany pierwszy selektor z drugiej grupy, „tworząc” selektor section h1
. Następnie zostanie wybrany pierwszy selektor z pierwszej grupy i drugi selektor z drugiej grupy, „tworząc” selektor section 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 nav h1
itd. Następnie zostanie wybrany drugi selektor z pierwszej grupy i drugi selektor z drugiej grupy, tworząc selektor nav h2
itd.
Precyzja selektora
Precyzja selektora pseudoklasy :is()
jest taka, jak precyzja najbardziej precyzyjnego selektora na jej liście argumentów i wlicza się ona do ogólnej precyzji całego selektora, w którym ta pseudoklasa jest użyta.
Pod tym względem pseudoklasa :is()
różni się od pseudoklasy ::where()
(), która działa bardzo podobnie, ale ma zerową precyzję.
Składnia
Składnia pseudoklasy :is
:
:is(lista selektorów rozdzielonych przecinkami) {...}
Pseudoklasa :is()
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.