# :focus-visible と :focus-within の違い

> 「キーボード操作のときだけスタイルを出す」のが:focus-visible、「子孫にフォーカスがあるとき親に効かせる」のが:focus-within。判定軸が違う直交概念なので、:has(:focus-visible)で組み合わせることもできます。

- URL: https://www.css-dictionary.com/compare/focus-visible-vs-focus-within/

## 比較表

| 観点 | :focus-visible | :focus-within |
| --- | --- | --- |
| 判定するもの | フォーカスの見せ方が必要か（主にキーボード操作か） | 自分または子孫がフォーカスを持つか |
| スタイルが当たる要素 | フォーカスされた要素自身 | 親（コンテナ）側 |
| マウスクリック時 | 通常は発火しない（テキスト入力欄は例外） | 発火する |
| 典型用途 | フォーカスリングの上品な出し分け | 検索ボックス全体の強調、フォーカスで開くメニュー |

## 使い分けの指針

フォーカスリングは「:focus { outline: none }で消す」のではなく:focus-visibleで出し分けるのが現代の標準です。「キーボード操作のときだけ親を強調」したい場合は、2つを合成した:has(:focus-visible)が使えます。

## AIがよくやる取り違え

AIはこの2つを混同した説明をしがちで、また今でもoutline: none単独の危険なコードを出すことがあります。フォーカス関連の依頼では「アクセシビリティを保って」と一言添えるのが有効です。

## それぞれの詳しい解説

- [pseudo-focus-visible](https://www.css-dictionary.com/property/pseudo-focus-visible.md)
- [pseudo-focus-within](https://www.css-dictionary.com/property/pseudo-focus-within.md)
- [outline](https://www.css-dictionary.com/property/outline.md)