Using data-* with CSS attribute selectors
Style elements conditionally based on data attribute values.
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.
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