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 , while native picker state often had no equivalent general selector.
The CSS 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 The familiar approach is: With the pseudo-class, the selector expresses the state directly: Both can coexist during migration: The attribute selector is a dependable fallback for details and dialog because those elements reflect their state through the attribute.
Style an open select One of the more interesting uses is a native select while its picker is displayed.
That state was difficult to target consistently with older CSS alone.
Style the parent with :has() becomes more useful when combined with .
The field wrapper can now react when its child select is open without JavaScript adding and removing a class.
Keep the visual change helpful and subtle.
Opening a picker should not cause nearby content to jump.
Inputs with picker interfaces The selector can also match inputs while a browser-provided picker is open, including controls such as date or color inputs where supported.
The exact picker presentation varies by platform, so test real operating systems rather than relying only on desktop screenshots. :open is not :popover-open Popover elements have their own showing state and selector.
Use for elements with semantic open and closed states.
Use for a popover that is currently showing.
These states can coexist in the platform, so choosing the correct selector makes the CSS easier to understand.
Open does not necessarily mean visible Semantic state and visual rendering are different.
A details element can have its open state even if an ancestor hides it. reports the state; it does not guarantee that a user can currently see or interact with the element.
Avoid using it as a substitute for visibility or layout checks.
Feature detection Use selector detection when the enhancement has no simple fallback.
For details and dialog, the attribute remains a practical fallback.
For native picker states, make sure the closed appearance is already complete and accessible.
Animation considerations An open-state selector can trigger a transition, but not every element's hidden-to-visible behaviour is automatically animatable.
Test closing as well as opening.
Some elements stop rendering content immediately when they close, which can prevent the reverse transition from appearing as expected.
Accessibility rules still apply CSS state selectors do not replace semantics.
Use as the interactive label for .
Give dialogs an accessible name.
Keep focus visible.
Do not communicate open state through color alone.
Ensure controls remain operable by keyboard.
Respect reduced-motion and forced-colors preferences.
The browser supplies a state; your design still has to communicate it clearly.
A practical migration Keep fallbacks for existing details and dialogs.
Add for select and native picker enhancements.
Use for isolated new styling.
Test keyboard interaction, zoom, and multiple operating systems.
Use instead when the component is a popover.
Conclusion is a small CSS feature with a useful effect: it gives several native controls a shared vocabulary for their active state.
It can remove JavaScript classes from simple visual changes, improve styling for native pickers, and make selectors read more like the interface behaviour they represent.
Use it as an enhancement, keep sensible fallbacks, and remember that state selection is only one part of an accessible component.
Sources: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/%3Aopen https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details https://developer.mozilla.org/en-US/docs/Web/CSS/:popover-open https://web.dev/baseline/2026