Styling from state in CSS

The state lives in an attribute the script already has to set, so the class list stays still.

[data-state="loading"] { opacity: 0.6; pointer-events: none; }
[data-state="error"] { border-color: #dc2626; }

[aria-expanded="true"] .chevron { rotate: 180deg; }
[aria-current="page"] { font-weight: 600; }
[aria-busy="true"] { cursor: progress; }

.field:has(input:disabled) { color: #94a3b8; }

.accordion:has([aria-expanded="true"]) { background: #f8fafc; }

How it works

1. [data-state="open"] reads as a state and not as a name.
2. ARIA attributes are state too, and styling them keeps the two in step.
3. :has() lets a parent respond to a child's state.

Keywords and builtins used here

• accordion
• background
• chevron
• color
• cursor
• deg
• field
• opacity
• rotate

The run, in numbers

Lines

10

Characters to type

361

Tokens

94

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 66 seconds.

Type this snippet

Step 3 of 3 in Naming things, step 6 of 9 in Organizing CSS.

← Previous Next →