:open
Targets elements that are currently in an 'open' state, such as a <details> element that is expanded or a <dialog> that is visible.
Quick example
details:open {
/* Adds a top border to the content box only when the details are open */
border-top: 2px solid #3b82f6;
}:open Browser Support
Newly availableSince 202671% global usage
Since 2026 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
133+
136+
26.5+
133+