Should We Even Have :closed? | CSS-Tricks

Should We Even Have :closed?

The CSSWG has deferred the :closed pseudo-class, leaving developers to use :not(:open) instead. This decision stems from debates over readability and specificity in 2025.

Why This Matters

While :not(:open) technically achieves the same result as :closed, it risks matching elements that aren’t open/closeable, introducing edge-case bugs. The CSSWG prioritized clarity and flexibility, acknowledging that :closed could return if consensus shifts. However, maintaining readable code often favors explicit selectors over negated ones, especially in complex stylesheets.

Key Insights

• “CSSWG deferred :closed in 2025, citing lack of consensus” (CSS-Tricks, 2025)
• “Use :not(:open) as a workaround, but avoid applying it to non-toggleable elements” (Tab Atkins, 2022)
• “Bramus notes :read-only was defined as :not(:read-write) and successfully shipped” (WHATWG, 2024)

Working Example

/* Styles for open <details> element */
details:open {
  background: lightblue;
  color: darkred;
}

/* Styles for closed <details> element using :not(:open) */
details:not(:open) {
  background: lightgray;
  color: black;
}

Practical Applications

• Use Case: Style <details> elements based on their open/closed state using :not(:open) as a fallback.
• Pitfall: Applying :not(:open) to elements like <div> (which lack open/close states) may inadvertently trigger styles.

References:

• https://css-tricks.com/should-we-even-have-closed/