Hide another element when details[open]-CodePudding

I have a standard

<details>
<summary>
Text
</summary>
</details>

and a <div > elsewhere on the same page (outside the details altogether). How to hide the div when details[open], for example by setting .something {display: none;}?

I tried

details[open] > .something {
  display: none;
}

with and without the >, but it doesn't do anything.

I'm open to JS as well, but I'd expect this to work in css.

CodePudding user response：

You can use the sibling operator. But please not that the CSS cannot traverse up or reverse.

details[open] ~ .nested .something,
details[open]   .something {
  display: none;
}

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>
<div >Something something, open details.</div>
<div >
  <p>Let's try to target the below too.</p>
  <p >You won't see this if details is open.</p>
</div>

TBH, this kinda explains it: