:is()
:is(lista selektorów)
Wybiera element, który pasuje do co najmniej jednego selektora w nawiasach. Skraca powtarzające się selektory: .article :is(h2, h3, h4) zamiast .article h2, .article h3, .article h4. Specyficzność to najwyższa specyficzność z listy – bez względu na to, który selektor faktycznie pasuje do elementu.
Przykłady
Nagłówki wszystkich poziomów w artykule jednym selektorem:
<div class="article"> <h3>Nagłówek</h3> <p>Tekst artykułu.</p> <h4>Śródtytuł</h4> <p>Dalszy tekst.</p> </div>
.article p { margin: 0 0 6px; }
.article :is(h3, h4) {
margin: 0 0 4px;
color: #01579b;
font-family: Georgia, serif;
}
Połączenie dwóch list – bez :is() trzeba by czterech selektorów (.card h4, .card p, .panel h4, .panel p):
<div class="card"> <h4>Karta</h4> <p>Tekst karty.</p> </div> <div class="panel"> <h4>Panel</h4> <p>Tekst panelu.</p> </div>
.card,
.panel {
margin-bottom: 8px;
padding: 8px 10px;
border: 1px solid #ddd;
}
:is(.card, .panel) :is(h4, p) {
margin: 0;
}
:is(.card, .panel) h4 { color: #e65100; }
Na co uważać
- Specyficzność pochodzi od najsilniejszego selektora w nawiasach:
:is(#menu, p)ma1-0-0, nawet gdy wybiera zwykły akapit. Dla zerowej specyficzności użyj:where(). - Lista toleruje błędy – błędny selektor w nawiasach zostaje pominięty, a reszta działa. Obsługują Chrome od 88, Firefox od 82 i Safari od 14; Firefox 78 do 81 znał
:is(), ale błędny selektor odrzucał całą regułę. - Pseudoelementy (
::before,::after) wewnątrz:is()nie działają; zapisuje się je za nim::is(h3, h4)::before. - Nie używaj starszych nazw
:matches(),:-webkit-any()i:-moz-any().
Obsługa w przeglądarkach
Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od stycznia 2021, za szeroko dostępne uznawane od lipca 2023. Od wersji: Chrome 88, Firefox 78, Safari 14. Stan: październik 2026 (MDN browser-compat-data).
Zobacz też:
:where()
:not()
:has()
Lista selektorów (,)
Specyficzność i kaskada