How to style a <details> element differently depending on whether it’s open or closed

• Posted 7 January 2024
• Tagged with css

If you want to style a <details> element which is open, use the details[open] selector (MDN link):

details[open] {
  background: green;
}

If you want to style a <details> element which is closed, there are two options:

1. Apply a style with the details selector, and then undo it for the open state with the details[open] selector.

2. Or if you want to make it clearer that this only applies to the closed element, you combine the :not() pseudo-class and open:

   details:not([open]) {
     background: red;
   }
   

   I got this by guessing, but it works in Safari. This combination of :not and square brackets syntax is new to me, but it seems to be thing!