[atrybut]
Wybiera elementy po atrybucie HTML i jego wartości: dokładnej, początku, końcu, fragmencie albo słowie z listy.
Przykład
#a[href^="https"]::after {
content: " ↗";
}
a[href$=".pdf"]::before {
content: "PDF";
margin-right: 6px;
padding: 1px 5px;
border-radius: 4px;
background: #f43f5e;
color: #fff;
font-size: 11px;
font-weight: 700;
}<ul class="stage" style="display: grid; gap: 8px; margin: 0; padding: 12px 14px; list-style: none;">
<li><a href="https://example.com" style="color: #c4b5fd;">Dokumentacja zewnętrzna</a></li>
<li><a href="/pliki/sylabus.pdf" style="color: #c4b5fd;">Sylabus kursu</a></li>
<li><a href="/kursy" style="color: #c4b5fd;">Lista kursów</a></li>
</ul>Definicja i zastosowanie
#Selektor atrybutu zapisujesz w nawiasach kwadratowych. Sam [title] wybiera każdy element, który ma atrybut title, bez względu na wartość, nawet pustą. Po dodaniu operatora i wartości sprawdzasz treść atrybutu: dokładną wartość, jej początek, koniec, dowolny fragment albo pojedyncze słowo z listy.
To wygodny sposób na stylowanie bez dopisywania klas. Pola formularzy rozróżnisz po typie (input[type="email"]), linki zewnętrzne po początku adresu (a[href^="https"]), a pliki po rozszerzeniu (a[href$=".pdf"]). Świetnie działa też z atrybutami data-* i aria-*, które opisują stan komponentu, na przykład [aria-expanded="true"].
Wartość w cudzysłowie jest zawsze bezpieczna. Cudzysłów możesz pominąć tylko wtedy, gdy wartość jest prostym słowem z liter, cyfr, łączników i podkreśleń, które nie zaczyna się od cyfry. Wielkość liter w wartości zwykle ma znaczenie, chyba że przed nawiasem zamykającym dodasz flagę i.
Specyficzność selektora atrybutu to (0, 1, 0), tyle samo co klasy. Rzadziej spotkasz operator |=: [lang|="pl"] pasuje do wartości pl oraz do wartości zaczynających się od pl-, np. pl-PL.
Składnia
#[atrybut] | [atrybut="w"] | [atrybut^="w"] | [atrybut$="w"] | [atrybut*="w"] | [atrybut~="w"] | [atrybut|="w"] | [atrybut="w" i]Warianty zapisu
#[atrybut]
Liczy się sama obecność atrybutu, wartość nie gra roli. Pasuje tylko link z atrybutemtitle.[atrybut="w"]
Dokładnie ta wartość, znak w znak. Element z „css nowe” nie pasuje, choć też zawiera słowo css.[atrybut^="w"]
Wartość zaczyna się od podanego tekstu. Tak najczęściej wyróżnia się linki zewnętrzne.[atrybut$="w"]
Wartość kończy się podanym tekstem. PlikMAPA.PDFnie pasuje, bo wielkość liter ma znaczenie.[atrybut*="w"]
Podany tekst występuje w dowolnym miejscu wartości, także w środku adresu. Pasują oba linki do plików.[atrybut~="w"]
Wartość to lista słów rozdzielonych spacjami i jedno z nich to dokładnie „css”. Słowo „css-grid” się nie liczy.flaga i
Flagaiwyłącza rozróżnianie wielkości liter, więc pasują oba pliki PDF: małymi i wielkimi literami.
Warianty zapisu w praktyce
#[title]
title.[title] { background: #7c3aed; color: #fff; }[href^="https"]
[href^="https"] { background: #7c3aed; color: #fff; }[href$=".pdf"]
MAPA.PDF nie pasuje, bo wielkość liter ma znaczenie.[href$=".pdf"] { background: #7c3aed; color: #fff; }[href*="pliki"]
[href*="pliki"] { background: #7c3aed; color: #fff; }[href$=".pdf" i]
i wyłącza rozróżnianie wielkości liter, więc pasują oba pliki PDF: małymi i wielkimi literami.[href$=".pdf" i] { background: #7c3aed; color: #fff; }Więcej przykładów
#.toggle[aria-expanded="true"] {
background: #7c3aed;
}
.toggle[aria-expanded="false"] + .details {
display: none;
}<style>
.toggle { padding: 8px 14px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit; cursor: pointer; }
.details { margin: 8px 0 0; color: #a1a1aa; }
</style>
<button class="toggle" type="button" aria-expanded="false" onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true')">Szczegóły lekcji</button>
<p class="details">Czas: 15 minut. Poziom: początkujący.</p>Kliknij przycisk. Skrypt zmienia tylko wartość aria-expanded, a kolor przycisku i widoczność szczegółów wynikają wyłącznie z CSS.
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
#- Stan komponentu trzymaj w atrybutach, takich jak
aria-expandedczydata-state, i stylizuj go selektorem atrybutu. Wygląd zawsze będzie zgodny z tym, co słyszą użytkownicy czytników ekranu. - Selektor atrybutu widzi tylko atrybuty zapisane w HTML.
input[value=""]nie zareaguje na wpisywanie, a[checked]na kliknięcie pola. Do bieżącego stanu służą pseudoklasy, np.:checkedi:placeholder-shown. - Adresy i rozszerzenia plików bywają pisane różnie, dlatego przy
^=,$=i*=warto rozważyć flagęi.
Powiązane hasła
#- .klasaWybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
- #idWybiera element o podanym identyfikatorze z atrybutu id. Ma bardzo wysoką specyficzność, więc jego reguły trudno potem nadpisać.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
- :checkedPasuje do zaznaczonego pola wyboru, wybranego przycisku radio i wybranej opcji na liście select.
- ::afterTworzy wirtualny element na końcu zawartości elementu. Idealny do strzałek, znaczków, podkreśleń i nakładek.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
Widzisz błąd albo brakuje przykładu? Napisz do nas.