"So, given this: details:open { background: lightblue; color: darkred; } We expect that the <details> element gets a light blue background and dark red text when it is in an open state (everywhere but Safari at the time I'm writing this): But what if we want to select the "closed" state instead? That's what we have the:closed pseudo-class for, right? It's supposed because it's not specced yet."
"Talks surrounding :open started in May 2022 when Mason Freed raised the issue of adding :open (which was also considered being named :top-layer at the time) to target elements in the top layer (like popups): Today, the OpenUI WC similarly resolved to add a :top-layer pseudo class that should apply to (at least) elements using the Popup API which are currently in the top layer."
The :open pseudo-selector matches elements that support open and closed states, such as <details> and <select>, when they are open. A complementary :closed pseudo-class has been proposed but is not yet specified. The closed state can be targeted today using :not(:open) (for example, details:not(:open)). Discussions around :open began in May 2022 when a proposal considered naming and broader top-layer behavior. The OpenUI Working Group resolved to add a :top-layer pseudo-class intended for Popup API elements and other top-layer things like modal dialogs, fullscreen elements, and ::backdrop.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]