CSS `:open` pseudo-class

[ramiy]

Description

The :open CSS pseudo-class matches elements that have an open states, elements like <dialog>, <details> and <select>.

It's similar to :checked pseudo-class on elements like input[type="radio"] or input[type="checkbox"].

Specification

https://drafts.csswg.org/selectors-4/#open-state

web-feature

https://web-platform-dx.github.io/web-features-explorer/features/open-closed/

Test Links

https://wpt.fyi/results/?label=master&label=experimental&aligned&q=open-pseudo

Additional Signals

No response

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web feature (from the web-features project) which is referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

Feature :open

• ID: open-closed
• Name: :open
• Description: The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.
• Baseline status: Limited Availability
• Docs: :open
• Standard positions: Mozilla, WebKit
• More information: See the web-features explorer

[wpt-interop]

Thank you for proposing CSS :open pseudo-class for Interop 2026.

We are pleased to let you know that it has been accepted as part of the Dialogs and popovers focus area.

You’ll be able to track progress on this topic throughout the year via the Interop 2026 dashboard.

Posted on behalf of the Interop team.