How to style a Details or Summary HTML tags when is open

Posted on December 31, 2021

Suppose this HTML markup:

<details>
    <summary>Title</summary>
  <p>
    Content
  </p>
</details>

Here the CSS to style the summary when details is open by the user:

details[open] summary{
  background:red;
}