# :has()

> 「子や後続の要素が条件を満たす親・前の要素」を選択できる擬似クラスです。長年不可能だった『親セレクタ』を実現し、JavaScriptなしで子の状態に応じた親のスタイリングができます。

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

## 構文

```css
:has(<relative-selector-list>)
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 105+ / Firefox 121+ / Safari 15.4+ / Edge 105+

## コード例

### 例1: 画像を含むカードにだけグリッドレイアウトを適用

```css
/* 画像を含むカードだけレイアウトを変える */
.card:has(img) {
  display: grid;
  grid-template-columns: 120px 1fr;
}
```

### 例2: 子のinputの検証状態に応じて親フィールドを装飾

```css
/* 入力が無効な時にフィールド全体を強調 */
.field:has(input:invalid) {
  border-color: red;
  background: #fff5f5;
}
```

### 例3: 直後の兄弟がチェック済みのラベルを強調（前方の要素を選択）

```css
/* チェックされたら次の要素ではなく“前”のラベルを変える */
label:has(+ input:checked) {
  font-weight: bold;
  color: #2563eb;
}
```

## TIPS

「〜を含む」だけでなく:has(> img)で直下限定、:has(+ .next)で兄弟条件も書けます。フォームの状態連動UI（:has(:checked)や:has(:focus-visible)）はJavaScript削減の定番パターンです。

## よくある間違い

:has()の中に:has()はネストできません。また詳細度は引数のセレクタで決まるため、:has(#id)のような指定は詳細度が跳ね上がり上書きしにくくなります。

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

AIは学習時期によって「:has()は未対応ブラウザが多いのでJavaScriptで実装すべき」と古い提案をしがちですが、2023年12月に全主要ブラウザ対応済み（Baseline）です。逆にAIが生成した:has()が意図通り動かない場合、:has()内のネスト（:has(:has())は不可）や、擬似要素（::before等）を引数に書いている（無効）ケースが典型です。

## AIへの依頼文例

- チェックボックスがONのとき、その親のカード全体の背景色を変えたい。JavaScriptを使わず:has()で実装して
- input:invalidのときにラベルの色を赤にしたい。ラベルがinputの前にあるHTML構造のまま:has()で書いて
- このjQueryの親要素操作コードを、:has()を使ったCSSだけの実装に置き換えられるか検討して

## 関連プロパティ

- [pseudo-hover](https://www.css-dictionary.com/property/pseudo-hover.md)
- [pseudo-nth-child](https://www.css-dictionary.com/property/pseudo-nth-child.md)
- [pseudo-focus-visible](https://www.css-dictionary.com/property/pseudo-focus-visible.md)
- [pseudo-user-valid](https://www.css-dictionary.com/property/pseudo-user-valid.md)