比較記事一覧に戻る
:focus-visible と :focus-within の違い
TL;DR — ひとことで言うと
「キーボード操作のときだけスタイルを出す」のが:focus-visible、「子孫にフォーカスがあるとき親に効かせる」のが:focus-within。判定軸が違う直交概念なので、:has(:focus-visible)で組み合わせることもできます。
比較表
| 観点 | :focus-visible | :focus-within |
|---|---|---|
| 判定するもの | フォーカスの見せ方が必要か（主にキーボード操作か） | 自分または子孫がフォーカスを持つか |
| スタイルが当たる要素 | フォーカスされた要素自身 | 親（コンテナ）側 |
| マウスクリック時 | 通常は発火しない（テキスト入力欄は例外） | 発火する |
| 典型用途 | フォーカスリングの上品な出し分け | 検索ボックス全体の強調、フォーカスで開くメニュー |
使い分けの指針
フォーカスリングは「:focus { outline: none }で消す」のではなく:focus-visibleで出し分けるのが現代の標準です。「キーボード操作のときだけ親を強調」したい場合は、2つを合成した:has(:focus-visible)が使えます。
🤖 AIがよくやる取り違え
AIはこの2つを混同した説明をしがちで、また今でもoutline: none単独の危険なコードを出すことがあります。フォーカス関連の依頼では「アクセシビリティを保って」と一言添えるのが有効です。