CSS :has()セレクター - 親セレクターの解説

:has()リレーショナル擬似クラス

:has()セレクターはCSSに追加された最も強力な機能の一つです。引数セレクターにマッチする子孫（または兄弟）を含む要素を選択します。これにより、開発者が何十年も要求していた「親セレクター」の機能をCSSに効果的に提供します。

構文

parent:has(child) {
  /* 親に適用されるスタイル */
}

基本的な例

画像を含むカードをスタイリング：

.card:has(img) {
  padding: 0;
  overflow: hidden;
}

無効な入力を持つフォームグループをスタイリング：

.form-group:has(input:invalid) {
  border-left: 3px solid red;
}

高度なパターン

前の兄弟をスタイリング（:has内の+コンビネーター使用）：

/* 必須入力の前のラベル */
label:has(+ input:required)::after {
  content: " *";
  color: red;
}

レスポンシブ数量クエリ：

/* リストに4つ以上の項目がある場合、異なるスタイルに */
ul:has(li:nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

ブラウザサポート

• Chrome 105+（2022年8月）
• Safari 15.4+（2022年3月）
• Firefox 121+（2023年12月）

詳細度

:has()の詳細度は、:is()と同様に、最も具体的な引数によって決定されます。

パフォーマンスの考慮

:has()は子孫を評価できるため、ブラウザは効率的な無効化アルゴリズムを実装する必要がありました。実際には、典型的なユースケースではパフォーマンスは良好ですが、:has(*)のような深くネストされた、または過度に広いパターンは避けてください。