Używanie data-* z selektorami atrybutów CSS
Warunkowe stylizowanie elementów na podstawie wartości atrybutów data-*
Używanie data-* z selektorami atrybutów CSS to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Selektory atrybutów CSS
Selektory atrybutów CSS dopasowują elementy na podstawie obecności atrybutu i jego wartości: [data-state] dopasowuje każdy element z atrybutem data-state; [data-state="active"] dopasowuje tylko elementy, których wartość jest równa „active”.
Selektor obecności
[data-tooltip] dopasowuje elementy zawierające atrybut data-tooltip, niezależnie od jego wartości. Można go użyć do zastosowania bazowych stylów podpowiedzi do każdego elementu zawierającego dane podpowiedzi, zanim zostanie uwzględniona jej treść.
Selektor dokładnego dopasowania
[data-theme="dark"] dopasowuje tylko elementy, w których data-theme jest dokładnie równe „dark”. Umożliwia to stylowanie na podstawie motywu: ciemne tokeny kolorów są stosowane, gdy element html ma ustawione przez JavaScript data-theme="dark".
Selektory częściowego dopasowania
[data-icon^="arrow"] dopasowuje wartości zaczynające się od „arrow”. [data-label$="ing"] dopasowuje wartości kończące się na „ing”. [data-tag*="feature"] dopasowuje wartości zawierające „feature”. Pozwala to stosować stylowanie oparte na wzorcach bez dodawania wielu klas.
Maszyna stanów z data-*
Stan komponentu należy modelować za pomocą atrybutów data-state: [data-state="idle"], [data-state="loading"], [data-state="error"]. Reguły CSS dla poszczególnych stanów zastępują wiele warunkowych nazw klas, przechowując stan w jednym atrybucie i wyraźnie oddzielając style.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Specyficzność selektorów atrybutów
Selektory atrybutów mają taką samą specyficzność jak selektory klas (0,1,0). Po połączeniu z selektorem elementu: button[data-variant="primary"] ma specyficzność (0,1,1). Należy uwzględniać specyficzność selektorów atrybutów razem z regułami opartymi na klasach, aby unikać konfliktów.
Wzorzec podpowiedzi
Podpowiedź oparta wyłącznie na CSS z użyciem data-tooltip: po najechaniu należy zastosować ::after { content: attr(data-tooltip) }. Funkcja content: attr() odczytuje wartość atrybutu i używa jej jako treści pseudoelementu — nie jest wymagany JavaScript ani dodatkowe elementy HTML.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* a klasa do stylowania
Klas należy używać do określania celu stylowania (is-active, has-error), a atrybutów data do przechowywania danych (data-user-id, data-count). Gdy ten sam atrybut steruje zarówno działaniem (odczytuje go JavaScript), jak i stylowaniem (wybiera go CSS), data-* eliminuje powielanie informacji między JavaScript a CSS.
Łączenie selektorów data-*
Można łączyć wiele selektorów atrybutów: [data-type="button"][data-size="large"] dopasowuje elementy, w których ustawiono oba atrybuty. Umożliwia to złożone dopasowanie bez konieczności tworzenia połączonej klasy, takiej jak .button-large, i ogranicza mnożenie klas.
Uwaga dotycząca wydajności
Selektory atrybutów są nieco wolniejsze od selektorów klas podczas ustalania stylów. W przypadku stylów statycznych należy preferować klasy. Selektorów atrybutów należy używać, gdy wartość atrybutu steruje stylem (np. data-state lub data-theme) i zmienia się w czasie działania — wtedy jeden atrybut zastępuje wiele przełączanych klas.
Wielkość liter
Domyślnie dopasowywanie wartości atrybutów w HTML rozróżnia wielkość liter (inaczej niż w przypadku kodów języków w XHTML). Należy dodać flagę i, aby dopasowywanie nie uwzględniało wielkości liter: [data-state="Active" i] dopasowuje „active”, „Active” i „ACTIVE”.
Sprawdzenie wiedzy
Co robi selektor CSS [data-state="loading"] .spinner?
Podsumowanie
Selektory atrybutów CSS dopasowują atrybuty data-* na podstawie ich obecności, dokładnej wartości lub wzorców częściowych. W połączeniu z content: attr() dla podpowiedzi oraz data-state dla maszyn stanów komponentów atrybuty data-* pełnią funkcję zarówno nośników danych, jak i punktów zaczepienia dla stylów CSS, bez mnożenia klas.
Często zadawane pytania
Czy lekcja „Używanie data-* z selektorami atrybutów CSS” jest bezpłatna?
Tak — pełny tekst „Używanie data-* z selektorami atrybutów CSS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Używanie data-* z selektorami atrybutów CSS”?
Warunkowe stylizowanie elementów na podstawie wartości atrybutów data-* Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Używanie data-* z selektorami atrybutów CSS”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Składnia data-* i konwencje nazewnictwa
- Dostęp do data-* za pomocą dataset w JavaScript
- Używanie data-* z selektorami atrybutów CSS
- Wzorce z praktyki — podpowiedzi i śledzenie stanu