` element a light blue background and dark red text when open (except in Safari at the time of writing). But what if we want to select the “closed” state? There’s a `:closed` pseudo-class intended for this, though it’s not officially specified yet. Do we need it? We can already target closed states with `:not(:open)`:
“`css
details:not(:open) {
/* … */
}
“`
So, do we really need a `:closed` pseudo-class?
### Some background
Discussions on `:open` began in May 2022 when Mason Freed suggested adding `:open` (considered as `:top-layer`) to target elements in the top layer, like popups. The OpenUI WC resolved to add a `:top-layer` pseudo-class for elements using the Popup API, applying to any element in the top layer, including modal `
This led to debates on whether the pseudo-element should be called `:open` or `:top-layer`. I was pleased when the CSSWG chose `:open` in August 2022, as it better implies something in the top layer.
### To `:close` or `:not(:open)`?
In September that year, Mason asked if we should have a `:closed` pseudo-class to match elements in their “closed” states, similar to `:open`. Tab Atkins supported this idea, suggesting it aligns with developers’ understanding of “open.” The consensus was to consider a `:closed` pseudo-class to avoid `:not(:open)` matching anything, even elements that don’t open or close.
However, Joey Arhar noted that `:closed` didn’t have consensus, and Luke Warlow argued that `:closed` matching things that can’t open feels odd, making it essentially `:not(:open)`.
### There is no `:closed`… for now
By November 2024, it was agreed to proceed with just `:open` and remove `:closed` for now. WHATWG and CSSWG indicated this decision might change. Bramus noted that `:read-only` is defined as `:not(:read-write)`, and that shipped.
### Which do you find easier to understand?
Personally, I’m fine with `:closed` or `:not(:open)`, as long as it works. I’ve used `:not(:open)` in my `::checkmark` and `::picker()` examples. However, I find `:closed` easier to think about than negated statements.
What do you think? Would you prefer `:closed` or just `:not(:open)`?
If you enjoy discussions like this, check out the CSSWG drafts on GitHub to join in.
