:has() selector

概要

従来のCSSでは子要素の状態で親をスタイリングすることが不可能だった。:has() はこの問題を解消し、任意のセレクターを条件として親・前の兄弟要素などを選択できるようにした。

対応ブラウザ

基本構文

/* チェック済み input を持つ label をスタイリング */
label:has(input[type="checkbox"]:checked) {
  background: #e0f2fe;
  font-weight: bold;
}

figure:has(img) {
  border: 2px solid #ddd;
  padding: 8px;
}

h2:has(+ p) {
  margin-bottom: 4px;
}

実務での使いどころ

• フォームのバリデーション表示

  エラーがある input を持つ .form-group 全体をハイライト。JS不要で包括的なスタイル変更が可能。

• チェックボックス連動UI

  チェック済みの input を持つ親カードの背景・ボーダーを変える。カートやタスクリストで有効。

• メディア有無によるレイアウト分岐

  img がある .card と ない .card で異なるレイアウト。

• セクション見出しの調整

  直後に p が続く h2 だけ margin-bottom を縮める。

注意点

フォールバック戦略

@supports not selector(:has(*)) {
  .js-fallback { display: block; }
}

@supports selector(:has(*)) {
  label:has(input:checked) {
    background: #e0f2fe;
  }
}

アクセシビリティ

• 視覚的なスタイル変更はスクリーンリーダーに伝わらない。aria-checked などを必ず併用。
• フォームのエラー表示は role="alert" でテキストとしても提供する。
• 色のみで状態を伝えず、色＋テキストを組み合わせる。

参考リンク

• MDN Web Docs — :has()
• Can I use — :has()