:open
A 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.
This is an experimental technology. The syntax and behavior are still subject to change.
Syntax
/* Usage 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
Since
2020 0% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Learn more