:focus-within
:focus-within は CSS の擬似クラスで、その要素または子孫要素にフォーカスがある場合に一致します。言い換えれば、それ自身が :focus 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。（これはシャドウツリーにおける子孫も含みます。）
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 60 | 79 | 52 | 10.1 | 60 | 10.3 | |
基本構文
CSS
.form-group:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.dropdown:focus-within .dropdown-menu {
display: block;
opacity: 1;
}ライブデモ
実務での使いどころ
-
フォームグループのハイライト
入力中のフォームグループ全体をハイライトしてユーザーの注目を誘導。
-
ドロップダウンメニュー
フォーカスが内部にある間はメニューを表示し続ける。
注意点
- フォーカスが外れた際のトランジションにも配慮する。
- 子孫のフォーカスで親がスタイル変更されるため、意図しない範囲に影響しないか確認。
アクセシビリティ
- フォーカス連動で表示されるコンテンツは Escape キーで閉じられるようにする。