coderef

:openBaseline · Newly available

The :open CSS pseudo-class matches elements that have open states, like <details>, <dialog>, or <select>, based on their state.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since May 11, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–132Not supported
133+Supportedsince Feb 4, 2025
Current: 155
Edge
12–132Not supported
133+Supportedsince Feb 6, 2025
Current: 154
Firefox
1–135Not supported
136+Supportedsince Mar 4, 2025
Current: 157
Safari
1–26.4Not supported
26.5+Supportedsince May 11, 2026
Current: 27
MobileChrome Android
18–132Not supported
133+Supportedsince Feb 4, 2025
Current: 155
Firefox Android
4–135Not supported
136+Supportedsince Mar 4, 2025
Current: 157
Safari iOS
1–26.4Not supported
26.5+Supportedsince May 11, 2026
Current: 27

How to use

Every current browser supports this, but it only became Baseline on May 11, 2026. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

Full syntax and examples are on MDN: :open.

Feature detection

CSS · check before using
@supports selector(:open) {
  /* styles that use :open */
}

/* or in JavaScript */
if (CSS.supports("selector(:open)")) {
  // use it
}

Documentation (MDN)

Specification