A, B
Przecinek łączy kilka selektorów w jedną regułę, żeby nadać im te same style bez powtarzania deklaracji.
Przykład
#input,
select,
textarea {
padding: 8px 10px;
border: 1px solid #52525b;
border-radius: 8px;
background: #18181b;
color: inherit;
font: inherit;
}<form class="stage" style="display: grid; gap: 8px;">
<input placeholder="Imię">
<select><option>Kurs CSS</option><option>Kurs HTML</option></select>
<textarea rows="2" placeholder="Wiadomość"></textarea>
</form>Definicja i zastosowanie
#Lista selektorów pozwala zapisać deklaracje raz dla wielu selektorów. Zamiast trzech osobnych reguł dla h1, h2 i h3 wystarczy h1, h2, h3 { … }. Każdy selektor na liście działa samodzielnie, a element pasujący do dowolnego z nich dostaje style.
Specyficzność liczy się osobno dla każdego selektora z listy. W regule #logo, p element #logo dostaje wagę (1, 0, 0), a zwykły akapit tylko (0, 0, 1). Lista nie podnosi wagi słabszych selektorów.
Najważniejsza pułapka: jeśli choć jeden selektor na liście jest błędny lub nieznany przeglądarce, cała reguła zostaje pominięta. Literówka typu a:hovr albo prefiks innej przeglądarki potrafi wyłączyć style dla wszystkich pozostałych selektorów. Wyjątkiem są listy w :is() i :where(), które błędne pozycje po prostu pomijają.
Długie listy zapisuj po jednym selektorze w linii, z przecinkiem na końcu każdej linii poza ostatnią. Przecinek po ostatnim selektorze to błąd, który unieważnia całą regułę.
Składnia
#A, B, C { właściwość: wartość; }Przykładowe listy
#- Nagłówek i oba akapity dostają ten sam styl z jednej reguły.
- Na liście mogą stać selektory różnego rodzaju: klasa obok nazw znaczników.
- Literówka w drugim selektorze unieważnia całą regułę. Nawet zwykłe akapity zostają szare.
- Ta sama lista w
:is()jest wyrozumiała: błędny selektor zostaje pominięty, a akapity dostają styl.
Przykładowe listy w praktyce
#h3, p
h3, p { background: #7c3aed; color: #fff; }p, p:hovr
p, p:hovr { background: #7c3aed; color: #fff; }:is(p, p:hovr)
:is() jest wyrozumiała: błędny selektor zostaje pominięty, a akapity dostają styl.:is(p, p:hovr) { background: #7c3aed; color: #fff; }Więcej przykładów
#.link:hover,
.link:focus-visible {
color: #fff;
text-decoration-thickness: 2px;
}<style>.link { color: #c4b5fd; text-underline-offset: 4px; }</style>
<p style="margin: 0;">Najedź na <a class="link" href="#">ten link</a> albo kliknij w podgląd i dojdź do niego klawiszem Tab.</p>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
#- Stawiaj każdy selektor w osobnej linii. Łatwiej wtedy zauważyć literówkę, która wyłączyłaby całą regułę.
- Selektory z prefiksami przeglądarek, np.
::-webkit-…i::-moz-…, zapisuj w osobnych regułach. Przeglądarka, która nie zna jednego z nich, odrzuci całą listę. - Długą listę z powtarzającym się początkiem skrócisz przez
:is():.card :is(h2, h3, h4)zamiast trzech pełnych selektorów.
Powiązane hasła
#- :is()Dopasowuje element do dowolnego selektora z listy. Skraca długie, powtarzalne selektory do jednego zapisu.
- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- Selektor typuWybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
- .klasaWybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
Widzisz błąd albo brakuje przykładu? Napisz do nas.