CSS :open pseudo-class

Category: DOM
Type: Chromium catches up
Status: Enabled by default (Chrome 133)
Intent stage: None

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/selectors/open-pseudo.html

Summary

The :open pseudo-class matches <dialog> and <details> when they are in their open state, and matches <select> and <input> when they are in modes which have a picker and the picker is showing.

Standards & signals

Specification: https://drafts.csswg.org/selectors-4/#open-state
Firefox: Positive
Safari: Support
Web developers: No signals
Tracking bug: https://issues.chromium.org/issues/324293874

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fselectors%2Fopen-pseudo
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20%3Aopen%20pseudo-class
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20%3Aopen%20pseudo-class
Baseline status: https://webstatus.dev/?q=CSS%20%3Aopen%20pseudo-class

View on chromestatus.com