CSS селектор для элемента данных при открытии

Question

Существует ли селектор CSS (например, псевдокласс), который может быть нацелен на элемент details, когда он открыт?

Одним из возможных вариантов использования этого было бы изменение цвета summary элемент, когда пользователь открывает элемент details.

Answer 1

Использовать атрибут [open] селектор

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>