Using data-* with CSS attribute selectors
Style elements conditionally based on data attribute values.
Using data-* with CSS attribute selectors is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
CSS Attribute Selectors
CSS attribute selectors match elements based on attribute presence and value: [data-state] matches any element with a data-state attribute; [data-state="active"] matches only when the value equals "active".
Presence Selector
[data-tooltip] matches elements that have the data-tooltip attribute, regardless of value. Use this to apply base tooltip styles to any element that has tooltip data attached, before considering the tooltip content.
Exact Match Selector
[data-theme="dark"] matches only elements where data-theme equals exactly "dark". This powers theme-based styling: apply dark color tokens when the html element has data-theme="dark" set by JavaScript.
Partial Match Selectors
[data-icon^="arrow"] matches values starting with "arrow". [data-label$="ing"] matches values ending with "ing". [data-tag*="feature"] matches values containing "feature". These enable pattern-based styling without adding many classes.
State Machine with data-*
Model component state with data-state attributes: [data-state="idle"], [data-state="loading"], [data-state="error"]. CSS rules per state replace multiple conditional class names, keeping state in one attribute and styles clearly separated.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Specificity of Attribute Selectors
Attribute selectors have the same specificity as class selectors (0,1,0). Combining them with element selectors: button[data-variant="primary"] has specificity (0,1,1). Plan attribute selector specificity alongside class-based rules to avoid conflicts.
Tooltip Pattern
A pure-CSS tooltip using data-tooltip: apply ::after { content: attr(data-tooltip) } on hover. The content: attr() function reads the attribute value and uses it as pseudo-element content — no JavaScript or extra HTML elements required.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}data-* vs class for Styling
Use classes for styling intent (is-active, has-error) and data attributes for data payload (data-user-id, data-count). When the same attribute drives both behavior (JS reads it) and styling (CSS selects on it), data-* eliminates duplication between JS and CSS.
Combining data-* Selectors
Chain multiple attribute selectors: [data-type="button"][data-size="large"] matches elements with both attributes set. This creates compound matching without requiring a combined class like .button-large, reducing class proliferation.
Performance Note
Attribute selectors are slightly slower than class selectors in style resolution. For static styles, prefer classes. Use attribute selectors when the attribute value drives the style (like data-state or data-theme) and changes at runtime — where a single attribute replaces multiple toggled classes.
Case Sensitivity
By default, attribute value matching is case-sensitive in HTML (but not for language codes in XHTML). Add the i flag for case-insensitive matching: [data-state="Active" i] matches "active", "Active", and "ACTIVE".
Knowledge Check
What does the CSS selector [data-state="loading"] .spinner do?
Summary
CSS attribute selectors match data-* attributes by presence, exact value, or partial patterns. Combined with content: attr() for tooltips and data-state for component state machines, data-* attributes serve as both data carriers and CSS styling hooks without class proliferation.
Frequently asked questions
Is the “Using data-* with CSS attribute selectors” lesson free?
Yes — the full text of “Using data-* with CSS attribute selectors” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Using data-* with CSS attribute selectors”?
Style elements conditionally based on data attribute values. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Using data-* with CSS attribute selectors” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- data-* Syntax and Naming Conventions
- Accessing data-* with dataset in JavaScript
- Using data-* with CSS attribute selectors
- Real-world Patterns Tooltips State Tracking