Accessibility Recommended

Style from the state

Style interface state from the state itself with selectors like :has(), :popover-open and [aria-expanded], not from toggled classes.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Style from state with :has(), :popover-open, :checked, [aria-expanded="true"] and :focus-within. Then the look always matches the state.

Example

[aria-expanded="true"] .chevron { rotate: 180deg; }
#menu:popover-open { display: grid; }
.field:has(input:invalid:not(:placeholder-shown)) { border-color: var(--danger); }
html:has(dialog:modal) { overflow: hidden; }

How to check

A search of the scripts finds no classList.toggle or classList.add next to a change of aria-expanded, open or checked.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/css-state-selectors.