CSS PARENT STATE

:has(details[open])で、開いているFAQを親ごと強調する

状態を持っているのはdetails。 でも、:has() を使うと外側のカードやセクションにも状態を反映できます。

Try opening FAQを開くと、親セクションもactiveになります
CSS only
Support FAQ

Project setup

idle open item exists
01
CSSだけで親カードも変えられますか？

`:has(details[open])` を使うと、開いているdetailsを含む親要素にスタイルを当てられます。 JavaScriptでclassを付けなくても、状態を外側へ伝えられます。

02
details[open] だけでは足りませんか？

details自身を変えるだけなら十分です。 ただ、セクション全体の背景やステータス表示を変えたい時は、親側を見られる `:has()` が便利です。

03
どんなUIで使えますか？

FAQ、設定画面、チェックリスト、ナビゲーションなど、 「中の状態を外側の見た目に反映したい」UIで使いやすいです。 

.faq-panel:has(details[open]) {
  border-color: var(--active);
  background: var(--active-soft);
  box-shadow:
    0 24px 70px rgb(15 159 115 / 18%);
}

.faq-item:has(details[open]) .item-number {
  background: var(--active);
  color: white;
}
Point

状態を持っている要素ではなく、それを含む外側のUIへ状態を反映できるのが `:has()` の便利なところです。