:open
ExperimentalA pseudo-class that matches elements when they are in an 'open' state, such as a <dialog> or <details> element. It's designed to provide a unified way to style openable components.
Quick example
dialog:open {
/* Styles the dialog when it is visible and open */
border: 5px solid var(--accent);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}:open Browser Support
Limited availability 0% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.