:where()
Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
Przykład
#:where(.btn) {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #3f3f46;
color: #fff;
}
.buy {
background: #10b981;
}<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Domyślny</button>
<button class="btn buy" type="button">Kup kurs</button>
</div>Pierwsza reguła gra rolę stylu z biblioteki komponentów: dzięki :where() ma wagę (0, 0, 0). Druga to Twoja zwykła klasa, która wygrywa bez !important, niezależnie od kolejności reguł.
Definicja i zastosowanie
#Pseudoklasa :where() przyjmuje listę selektorów i pasuje do elementu, który pasuje do dowolnego z nich, dokładnie jak :is(). Różnica jest jedna, ale ważna: cokolwiek wpiszesz w nawias, :where() dodaje do specyficzności zero.
Dzięki temu nadaje się do stylów, które mają łatwo ustępować: resetów, stylów domyślnych w bibliotekach komponentów i motywach. Reguła :where(.card) p ma wagę samego p, więc każdy użytkownik biblioteki nadpisze ją zwykłą klasą, bez !important.
Zerowana jest tylko część w nawiasie. W selektorze :where(.card) .title klasa .title nadal waży (0, 1, 0). Lista jest też wyrozumiała jak w :is(): błędne selektory są pomijane, a reszta działa.
Składnia
#:where( <lista selektorów> )Przykładowe selektory
#(0, 0, 0)
Identyfikator w nawiasie nie daje wagi, więc zwykłepwygrywa. Tło jest zielone.(1, 0, 0)
Dla porównania:is()zachowuje wagę identyfikatora i wygrywa. Tło jest niebieskie.(0, 1, 0)
Zerowana jest tylko część w nawiasie. Klasa.noteważy normalnie i pokonujep. Tło jest niebieskie.(0, 0, 0)
Nieznany selektor na liście jest pomijany, a reszta działa. Tło jest niebieskie.
Przykładowe selektory w praktyce
#:where(#intro)
p wygrywa. Tło jest zielone.:where(#intro) { background: royalblue; }
p { background: seagreen; }:is(#intro)
:is() zachowuje wagę identyfikatora i wygrywa. Tło jest niebieskie.:is(#intro) { background: royalblue; }
p { background: seagreen; }:where(#intro).note
.note waży normalnie i pokonuje p. Tło jest niebieskie.:where(#intro).note { background: royalblue; }
p { background: seagreen; }:where(#intro, :nieznana)
:where(#intro, :nieznana) { background: royalblue; }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
#- Resety i style domyślne pisz w
:where(). Każda późniejsza reguła, nawet z pojedynczym selektorem typu, łatwo je nadpisze. - Nie opakowuj w
:where()stylów, które mają wygrywać, na przykład stanów błędu. Zerowa waga sprawi, że przegrają z byle czym.
Powiązane hasła
#- :is()Dopasowuje element do dowolnego selektora z listy. Skraca długie, powtarzalne selektory do jednego zapisu.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- :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.
- @layerDzieli style na warstwy kaskadowe o ustalonej kolejności. Reguła z późniejszej warstwy wygrywa bez względu na specyficzność selektora.
Widzisz błąd albo brakuje przykładu? Napisz do nas.