:is()
Dopasowuje element do dowolnego selektora z listy. Skraca długie, powtarzalne selektory do jednego zapisu.
Przykład
#.link:is(:hover, :focus-visible) {
color: #fff;
text-decoration-color: #a78bfa;
text-decoration-thickness: 2px;
}<style>.link { color: #c4b5fd; text-underline-offset: 4px; text-decoration-color: #52525b; }</style>
<p style="margin: 0;">Najedź na <a class="link" href="#">pierwszy link</a> albo kliknij w podgląd i dojdź klawiszem Tab do <a class="link" href="#">drugiego</a>.</p>Definicja i zastosowanie
#Pseudoklasa :is() przyjmuje listę selektorów i pasuje, gdy element pasuje do któregokolwiek z nich. Jej główna zaleta to krótszy zapis: zamiast article h2, article h3, section h2, section h3 wystarczy :is(article, section) :is(h2, h3).
Lista w :is() jest wyrozumiała. Jeśli któryś selektor jest błędny albo nieobsługiwany, przeglądarka po prostu go pomija, a reszta działa. Zwykła lista po przecinku w takiej sytuacji odrzuca całą regułę.
Specyficzność :is() to waga najmocniejszego selektora z listy, niezależnie od tego, przez który element faktycznie pasuje. :is(#hero, p) ma wagę (1, 0, 0) także dla zwykłych akapitów. Jeśli chcesz tej samej składni, ale z wagą zero, użyj :where().
W nawiasie nie mogą stać pseudoelementy: :is(::before, ::after) nie zadziała, pseudoelementy trzeba wypisać osobno.
Składnia
#:is( <lista selektorów> )Przykładowe selektory
#- Nagłówki w
articlealbo wsection. Jeden selektor zamiast dwóch. - Lista może stać także na końcu: nagłówek i akapit w
aside. :is(article, aside) :is(h4, p)
Dwie listy dają cztery kombinacje w jednym krótkim zapisie.- Nieznany selektor
:nieznanazostaje pominięty, a reszta listy działa. Zwykła lista po przecinku odrzuciłaby całą regułę.
Przykładowe selektory w praktyce
#:is(article, section) h4
article albo w section. Jeden selektor zamiast dwóch.:is(article, section) h4 { background: #7c3aed; color: #fff; }aside :is(h4, p)
aside.aside :is(h4, p) { background: #7c3aed; color: #fff; }:is(article, aside) :is(h4, p)
:is(article, aside) :is(h4, p) { background: #7c3aed; color: #fff; }:is(section, :nieznana) p
:nieznana zostaje pominięty, a reszta listy działa. Zwykła lista po przecinku odrzuciłaby całą regułę.:is(section, :nieznana) p { background: #7c3aed; color: #fff; }Więcej przykładów
#:is(ul, ol) :is(ul, ol) {
margin: 4px 0;
color: #a1a1aa;
font-size: 14px;
}<ul class="stage" style="margin: 0; padding: 10px 10px 10px 30px;">
<li>Kursy
<ol><li>HTML i CSS</li><li>JavaScript</li></ol>
</li>
<li>Dokumentacja
<ul><li>Selektory</li></ul>
</li>
</ul>Jedna reguła obejmuje cztery przypadki: ul ul, ul ol, ol ul i ol ol.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Używaj
:is()do grupowania stanów:.btn:is(:hover, :focus-visible). Efekt dla myszy i klawiatury masz w jednej regule. - Pilnuj wagi. Jeden identyfikator na liście podnosi specyficzność całej pseudoklasy, nawet dla elementów, które pasują przez klasę.
- Gdy piszesz style bazowe, które mają być łatwe do nadpisania, zamień
:is()na:where().
Powiązane hasła
#- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- A, BPrzecinek łączy kilka selektorów w jedną regułę, żeby nadać im te same style bez powtarzania deklaracji.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
Widzisz błąd albo brakuje przykładu? Napisz do nas.