Använda data-* med CSS-attributselektorer
Styla element villkorligt utifrån värden i data-attribut
Använda data-* med CSS-attributselektorer är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
CSS-attributselektorer
CSS-attributselektorer matchar element utifrån om ett attribut finns och vilket värde det har: [data-state] matchar alla element med ett data-state-attribut; [data-state="active"] matchar endast när värdet är exakt "active".
Selektor för attributförekomst
[data-tooltip] matchar element som har attributet data-tooltip, oavsett värde. Använd detta för att tillämpa grundläggande tooltip-stilar på alla element som har tooltip-data kopplad till sig, innan tooltipens innehåll beaktas.
Selektor för exakt matchning
[data-theme="dark"] matchar endast element där data-theme är exakt lika med "dark". Detta används för temabaserad styling: tillämpa mörka färgtoken när html-elementet har data-theme="dark", angivet av JavaScript.
Selektorer för partiell matchning
[data-icon^="arrow"] matchar värden som börjar med "arrow". [data-label$="ing"] matchar värden som slutar med "ing". [data-tag*="feature"] matchar värden som innehåller "feature". Detta möjliggör mönsterbaserad styling utan att många klasser behöver läggas till.
Tillståndsmaskin med data-*
Modellera komponentens tillstånd med data-state-attribut: [data-state="idle"], [data-state="loading"], [data-state="error"]. CSS-regler per tillstånd ersätter flera villkorliga klassnamn, så att tillståndet hålls i ett attribut och stilarna förblir tydligt åtskilda.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Specificitet hos attributselektorer
Attributselektorer har samma specificitet som klassselektorer (0,1,0). När de kombineras med elementselektorer har button[data-variant="primary"] specificiteten (0,1,1). Planera attributselektorernas specificitet tillsammans med klassbaserade regler för att undvika konflikter.
Tooltip-mönster
En tooltip med enbart CSS och data-tooltip: använd ::after { content: attr(data-tooltip) } vid hovring. Funktionen content: attr() läser attributvärdet och använder det som pseudoelementets innehåll — ingen JavaScript eller extra HTML-element krävs.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* kontra klass för styling
Använd klasser för stylingavsikt (is-active, has-error) och dataattribut för datainnehåll (data-user-id, data-count). När samma attribut styr både beteendet (JavaScript läser det) och stylingen (CSS väljer utifrån det) eliminerar data-* duplicering mellan JavaScript och CSS.
Kombinera data-*-selektorer
Kedja flera attributselektorer: [data-type="button"][data-size="large"] matchar element där båda attributen är angivna. Detta skapar en sammansatt matchning utan att en kombinerad klass som .button-large behövs, vilket minskar antalet klasser.
Prestandaanmärkning
Attributselektorer är något långsammare än klassselektorer vid stilberäkning. Föredra klasser för statiska stilar. Använd attributselektorer när attributvärdet styr stilen (som data-state eller data-theme) och ändras under körning — då ersätter ett enda attribut flera klasser som annars måste växlas.
Skiftlägeskänslighet
Som standard är matchning av attributvärden skiftlägeskänslig i HTML (men inte för språkkoder i XHTML). Lägg till flaggan i för skiftlägesokänslig matchning: [data-state="Active" i] matchar "active", "Active" och "ACTIVE".
Kunskapskontroll
Vad gör CSS-selektorn [data-state="loading"] .spinner?
Sammanfattning
CSS-attributselektorer matchar data-*-attribut utifrån förekomst, exakt värde eller partiella mönster. Tillsammans med content: attr() för tooltips och data-state för komponenters tillståndsmaskiner fungerar data-*-attribut både som databärare och som CSS-krokar för styling, utan att antalet klasser behöver öka.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Använda data-* med CSS-attributselektorer” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Använda data-* med CSS-attributselektorer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Använda data-* med CSS-attributselektorer”?
Styla element villkorligt utifrån värden i data-attribut Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Använda data-* med CSS-attributselektorer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Syntax och namnkonventioner för data-*
- Åtkomst till data-* med dataset i JavaScript
- Använda data-* med CSS-attributselektorer
- Praktiska mönster: verktygstips och tillståndsspårning