Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector for details element when opened

Is there a CSS selector (like a pseudo class) that can target the details element when it is open?

One possible use for this would be to change the color of the summary element when the user open the details element.

like image 511
VorganHaze Avatar asked Apr 18 '20 16:04

VorganHaze


1 Answers

Use the attribute [open] selector

details summary {
  background: pink;
}

details {
  background: lightgreen;
}

details[open] summary {
  background: red;
}
<details>
  <summary>Details</summary>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, incidunt dolores! Laudantium fugit aspernatur rem autem, expedita ut id necessitatibus, perferendis, accusantium esse repudiandae?
</details>
like image 122
Paulie_D Avatar answered Oct 22 '22 09:10

Paulie_D



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!