Brug af data-* med CSS-attributvælgere
Stil elementer betinget ud fra værdier i data-attributter
Brug af data-* med CSS-attributvælgere er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
CSS-attributselektorer
CSS-attributselektorer matcher elementer ud fra, om en attribut findes, og hvilken værdi den har: [data-state] matcher ethvert element med en data-state-attribut; [data-state="active"] matcher kun, når værdien er lig med "active".
Tilstedeværelsesselektor
[data-tooltip] matcher elementer, der har data-tooltip-attributten, uanset dens værdi. Brug den til at anvende grundlæggende værktøjstiptypografi på alle elementer, hvor værktøjstipdata er knyttet, før du tager højde for værktøjstippets indhold.
Selektor for eksakt overensstemmelse
[data-theme="dark"] matcher kun elementer, hvor data-theme er nøjagtigt lig med "dark". Det muliggør temabaseret formatering: anvend mørke farveværdier, når html-elementet har data-theme="dark" angivet af JavaScript.
Selektorer for delvise overensstemmelser
[data-icon^="arrow"] matcher værdier, der starter med "arrow". [data-label$="ing"] matcher værdier, der slutter med "ing". [data-tag*="feature"] matcher værdier, der indeholder "feature". Det gør mønsterbaseret formatering mulig uden at tilføje mange klasser.
Tilstandsmaskine med data-*
Modellér komponenttilstand med data-state-attributter: [data-state="idle"], [data-state="loading"], [data-state="error"]. CSS-regler for hver tilstand erstatter flere betingede klassenavne, så tilstanden holdes i én attribut, og formateringen er tydeligt adskilt.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Specificitet for attributselektorer
Attributselektorer har samme specificitet som klasseselektorer (0,1,0). Når de kombineres med elementselektorer, har button[data-variant="primary"] specificiteten (0,1,1). Planlæg attributselektorernes specificitet sammen med klassebaserede regler for at undgå konflikter.
Værktøjstipmønster
Et rent CSS-baseret værktøjstip med data-tooltip: anvend ::after { content: attr(data-tooltip) }, når markøren holdes over elementet. Funktionen content: attr() læser attributværdien og bruger den som indhold i et pseudo-element — uden JavaScript eller ekstra HTML-elementer.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* kontra klasse til formatering
Brug klasser til formateringshensigt (is-active, has-error) og data-attributter til dataindhold (data-user-id, data-count). Når den samme attribut styrer både adfærd (JS læser den) og formatering (CSS vælger ud fra den), eliminerer data-* dobbeltarbejde mellem JS og CSS.
Kombination af data-*-selektorer
Kæd flere attributselektorer sammen: [data-type="button"][data-size="large"] matcher elementer, hvor begge attributter er angivet. Det skaber sammensat matchning uden at kræve en kombineret klasse som .button-large og reducerer ophobningen af klasser.
Bemærkning om ydeevne
Attributselektorer er en smule langsommere end klasseselektorer ved beregning af typografi. Til statisk formatering skal du foretrække klasser. Brug attributselektorer, når attributværdien styrer formateringen (som data-state eller data-theme) og ændres under kørsel — hvor én attribut erstatter flere klasser, der slås til og fra.
Forskel på store og små bogstaver
Som standard skelner match af attributværdier mellem store og små bogstaver i HTML (men ikke for sprogkoder i XHTML). Tilføj flaget i for match uden forskel på store og små bogstaver: [data-state="Active" i] matcher "active", "Active" og "ACTIVE".
Videnstjek
Hvad gør CSS-selektoren [data-state="loading"] .spinner?
Opsummering
CSS-attributselektorer matcher data-*-attributter ud fra deres tilstedeværelse, eksakte værdi eller delvise mønstre. Kombineret med content: attr() til værktøjstip og data-state til komponenternes tilstandsmaskiner fungerer data-*-attributter både som databærere og som kroge til CSS-formatering uden en ophobning af klasser.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Brug af data-* med CSS-attributvælgere” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Brug af data-* med CSS-attributvælgere”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Brug af data-* med CSS-attributvælgere”?
Stil elementer betinget ud fra værdier i data-attributter Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Brug af data-* med CSS-attributvælgere”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Syntaks og navngivningskonventioner for data-*
- Adgang til data-* med dataset i JavaScript
- Brug af data-* med CSS-attributvælgere
- Praktiske mønstre: værktøjstip og tilstandssporing