:open pseudo-class
:open は CSS の擬似クラスで、開閉の状態を持つ要素のうち、現在開いている状態にある要素を表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 133 | 133 | 136 | 26.5 | 133 | 26.5 | |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (122)
実装メモ
- セレクターは認識されますが、効果はありません。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (122)
実装メモ
- セレクターは認識されますが、効果はありません。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (122)
実装メモ
- セレクターは認識されますが、効果はありません。
基本構文
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 属性で通知されるようにする。