Web interfaces contain several elements that can be open or closed: disclosure widgets, dialogs, select pickers, date inputs, and color pickers.
Historically, styling those states required different selectors. A disclosure could use details[open], while native picker state often had no equivalent general selector.
The CSS :open pseudo-class provides one semantic selector for elements that are currently in an open state. MDN marks it Baseline 2026 Newly available since May 2026 across the latest core browser versions.
Older browsers still exist, so production use should include fallbacks where the open styling is essential.
Start with details
