data-* mit CSS-Attributselektoren verwenden
Formatieren Sie Elemente abhängig von den Werten ihrer Datenattribute
data-* mit CSS-Attributselektoren verwenden ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
CSS-Attributselektoren
CSS-Attributselektoren finden Elemente anhand des Vorhandenseins und des Werts eines Attributs: [data-state] findet jedes Element mit einem data-state-Attribut; [data-state="active"] findet nur Elemente, deren Wert „active“ entspricht.
Selektor für vorhandene Attribute
[data-tooltip] findet Elemente, die das data-tooltip-Attribut besitzen, unabhängig von dessen Wert. Verwenden Sie ihn, um auf jedes Element mit hinterlegten Tooltip-Daten grundlegende Tooltip-Styles anzuwenden, bevor Sie den Inhalt des Tooltips berücksichtigen.
Selektor für exakte Übereinstimmungen
[data-theme="dark"] findet nur Elemente, bei denen data-theme exakt „dark“ entspricht. Damit lässt sich eine themenbasierte Gestaltung umsetzen: Wenden Sie dunkle Farb-Tokens an, wenn das von JavaScript gesetzte Attribut data-theme="dark" am html-Element vorhanden ist.
Selektoren für teilweise Übereinstimmungen
[data-icon^="arrow"] findet Werte, die mit „arrow“ beginnen. [data-label$="ing"] findet Werte, die mit „ing“ enden. [data-tag*="feature"] findet Werte, die „feature“ enthalten. Damit ist eine musterbasierte Gestaltung möglich, ohne viele Klassen hinzuzufügen.
Zustandsautomat mit data-*
Modellieren Sie den Komponentenstatus mit data-state-Attributen: [data-state="idle"], [data-state="loading"], [data-state="error"]. CSS-Regeln pro Status ersetzen mehrere bedingte Klassennamen. Dadurch bleibt der Status in einem Attribut gebündelt und die Styles sind klar getrennt.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Spezifität von Attributselektoren
Attributselektoren haben dieselbe Spezifität wie Klassenselektoren (0,1,0). In Kombination mit Elementselektoren hat button[data-variant="primary"] die Spezifität (0,1,1). Planen Sie die Spezifität von Attributselektoren gemeinsam mit klassenbasierten Regeln, um Konflikte zu vermeiden.
Tooltip-Muster
Ein reiner CSS-Tooltip mit data-tooltip: Wenden Sie bei Hover ::after { content: attr(data-tooltip) } an. Die Funktion content: attr() liest den Attributwert aus und verwendet ihn als Inhalt des Pseudoelements – ohne JavaScript oder zusätzliche HTML-Elemente.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* vs. class für Styles
Verwenden Sie Klassen für die Styling-Absicht (is-active, has-error) und Datenattribute für Nutzdaten (data-user-id, data-count). Wenn dasselbe Attribut sowohl das Verhalten steuert (JavaScript liest es aus) als auch das Styling bestimmt (CSS selektiert danach), vermeidet data-* doppelte Angaben in JavaScript und CSS.
data-*-Selektoren kombinieren
Verketten Sie mehrere Attributselektoren: [data-type="button"][data-size="large"] findet Elemente, bei denen beide Attribute gesetzt sind. So ist eine kombinierte Auswahl möglich, ohne eine zusammengefasste Klasse wie .button-large zu benötigen, wodurch die Anzahl der Klassen begrenzt wird.
Hinweis zur Performance
Attributselektoren sind bei der Style-Auflösung etwas langsamer als Klassenselektoren. Bevorzugen Sie für statische Styles Klassen. Verwenden Sie Attributselektoren, wenn der Attributwert das Styling bestimmt (etwa data-state oder data-theme) und sich zur Laufzeit ändert – wenn also ein einzelnes Attribut mehrere umgeschaltete Klassen ersetzt.
Groß- und Kleinschreibung
Standardmäßig wird beim Abgleich von Attributwerten in HTML zwischen Groß- und Kleinschreibung unterschieden (bei Sprachcodes in XHTML jedoch nicht). Fügen Sie das i-Flag für eine Groß- und Kleinschreibung ignorierende Suche hinzu: [data-state="Active" i] findet „active“, „Active“ und „ACTIVE“.
Wissenscheck
Was bewirkt der CSS-Selektor [data-state="loading"] .spinner?
Zusammenfassung
CSS-Attributselektoren finden data-*-Attribute anhand ihres Vorhandenseins, eines exakten Werts oder von Teilmustern. Zusammen mit content: attr() für Tooltips und data-state für Zustandsautomaten von Komponenten dienen data-*-Attribute sowohl als Datenträger als auch als CSS-Anknüpfungspunkte für Styles, ohne dass immer mehr Klassen erforderlich werden.
Häufig gestellte Fragen
Ist die Lektion „data-* mit CSS-Attributselektoren verwenden“ kostenlos?
Ja — der vollständige Text von „data-* mit CSS-Attributselektoren verwenden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „data-* mit CSS-Attributselektoren verwenden“?
Formatieren Sie Elemente abhängig von den Werten ihrer Datenattribute Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „data-* mit CSS-Attributselektoren verwenden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- data-*-Syntax und Benennungskonventionen
- data-* mit dataset in JavaScript auslesen
- data-* mit CSS-Attributselektoren verwenden
- Praxisnahe Muster: Tooltips und Zustandsverwaltung