---
title: "Style from the state · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/css-state-selectors
updated: 2026-10-20
licence: "All rights reserved"
---

# Style from the state

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Style interface state from the state itself with selectors like `:has()`, `:popover-open` and `[aria-expanded]`, not from toggled classes.
- How: Style from state with `:has()`, `:popover-open`, `:checked`, `[aria-expanded="true"]` and `:focus-within`. Then the look always matches the state.
- Check: A search of the scripts finds no `classList.toggle` or `classList.add` next to a change of `aria-expanded`, `open` or `checked`.

Example:

```css
[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; }
```

**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`.

- Previous: [Build with native controls](https://agentwranglers.se/playbook/website/accessibility/native-interactive-elements)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)