Limited support 様子見。Safari 未対応。Baseline Limited support。プログレッシブ・エンハンスメントとして使用。
セレクター Limited support

:open pseudo-class

:open は開いた状態にある要素（details[open]、dialog.showModal() で開かれた dialog、展開された select など）にマッチする擬似クラス。[open] 属性セレクターと異なり、dialog の表示状態なども検出できる。

セレクター状態

概要

:open は開いた状態にある要素（details[open]、dialog.showModal() で開かれた dialog、展開された select など）にマッチする擬似クラス。[open] 属性セレクターと異なり、dialog の表示状態なども検出できる。

対応ブラウザ

デスクトップ

Chrome 133+
Edge 133+
Safari 未対応
Firefox 136+

モバイル

Chrome Android 133+
Safari iOS 未対応
Firefox Android 136+

基本構文

CSS 
details:open {
  border-color: #2563eb;
}

details:open > summary {
  font-weight: bold;
  color: #1e40af;
}

dialog:open {
  animation: fade-in 0.2s ease;
}

実務での使いどころ

  • 開閉状態のスタイリング

    details や dialog の開閉状態に応じたスタイル切り替え。

注意点

  • Safari 未対応のため、本番では [open] 属性セレクターをフォールバックとして使用する。
  • Baseline Limited support のため、広範なブラウザ対応が必要なプロジェクトでは注意。

フォールバック戦略

CSS 
/* フォールバック */
details[open] {
  border-color: #2563eb;
}

/* モダンブラウザ */
details:open {
  border-color: #2563eb;
}

アクセシビリティ

  • 開閉状態の変化は視覚的スタイルだけでなく、適切な ARIA 属性で通知されるようにする。

参考リンク