# :focus-within

> 自分自身または子孫要素にフォーカスがあるときにマッチする擬似クラスです。入力中の検索ボックス全体をハイライトしたり、フォーカスでドロップダウンを開いたりと、「中にフォーカスがある親」の装飾がJavaScriptなしで書けます。

- カテゴリ: 擬似クラス
- URL: https://www.css-dictionary.com/property/pseudo-focus-within/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

## 構文

```css
:focus-within
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 60+ / Firefox 52+ / Safari 10.1+ / Edge 79+

## コード例

### 例1: 中のinputにフォーカスがあるとき検索ボックス全体を強調

```css
.search-box:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2);
}
```

### 例2: キーボードフォーカスで開閉するアクセシブルなメニュー

```css
.dropdown .menu {
  visibility: hidden;
}

.dropdown:focus-within .menu {
  visibility: visible;
}
```

## TIPS

アイコンとinputを組み合わせた複合フォームコントロールの「見た目上のフォーカスリング」に最適です。キーボード操作時だけに限定したい場合は:has(:focus-visible)という選択肢もあります。

## よくある間違い

:focusは「その要素自身」、:focus-withinは「自身+子孫」です。また:focus-withinはマウスクリックのフォーカスにも反応するため、キーボード限定にしたい場合は:has(:focus-visible)を使い分けます。

## AIがよく間違えるポイント

AIは「入力中に親要素を装飾」という要望にfocusin/focusoutイベントで親にクラスを付けるJavaScriptを提案しがちですが、:focus-withinで1行です。逆に:focus-visibleと:focus-withinを混同した説明をすることもあります（前者はキーボード判定、後者は子孫判定で直交する概念）。

## AIへの依頼文例

- アイコン付き検索ボックスで、中のinputにフォーカスしたら外枠全体が光るデザインを:focus-withinで実装して
- このJSでクラス切替しているフォーカス時のカード強調を:focus-withinに置き換えて

## 関連プロパティ

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