css - ネストされた HTML5 を展開する方法リンク先を見えるようにする要素？

Question

次のようなものを含む html5 ページがあります。

<details>
  <summary>X and Y</summary>
  <details id="x">
    <summary>X</summary>
    Long text about x.
  </details>
  <details id="y">
    <summary>Y</summary>
    Long text about Y.
  </details>
</details>
A lot of other stuff.
<a href="#x>Go to X</a>
<a href="#y>Go to Y</a>

ユーザーが「X/Y に移動」リンクのいずれかをクリックしたときにリンク ターゲットを強調表示するために、既に CSS details:target 仕様を使用しています。ただし、最上位の details-element が展開されていない場合、ユーザーはそれを見ることができず、機能しないように見えます。

その子の一部を対象とするリンクがクリックされたときにトップレベルの詳細要素を展開する方法 (できれば html5 + css のみ) はありますか?