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:
:is(p, div) {color: green;}
p, div {color: green;}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łę:
section h1,
section h2,
section h3,
section h4,
nav h1,
nav h2,
nav h3,
nav h4,
article h1,
article h2,
article h3,
article h4,
aside h1,
aside h2,
aside h3,
aside h4,
header h1,
header h2,
header h3,
header h4,
footer h1,
footer h2,
footer h3,
footer h4 {
color: green;
}Pseudoklasa :is() w takim przypadku zaoszczędzi nam bardzo dużo pracy. Poniższy reguła jest równoważna z powyższą:
:is(section, nav, article i aside, header, footer) :is(h1, h2, h3, h4) {
color: green;
}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.