🎯
CSSだけで親要素の条件分岐！`:has()`実用解説
CSSだけで親要素の条件分岐！:has()実用解説
📝 はじめに
これまで「子要素の有無や状態に応じて親要素を変化させる」には JavaScript必須 でした。
しかし今では :has() セレクターを使うことで、CSSだけで完結できます。
2025年現在、主要ブラウザのサポートも十分進み、実用的に使える場面が増えてきました。
今回は基本構文から実例、注意点までまとめます。
🔧 基本文法
.parent:has(.child) {
background: pink;
}
上記のように書くと、.parent 内に .child を含む場合だけ背景をピンクにできます。
つまり「子要素に応じて親を装飾する」ことが可能になります。
💡 実用パターン
1. カードのバッジ表示で色分け
.list-item:has(.label-s-scout) {
background: #fffbe6;
}
2. 入力フォームのエラーを親ごと強調
form:has(input:invalid) {
border: 2px solid red;
}
3. アコーディオンの開閉スタイル
.accordion:has([open]) {
box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
⚠️ 注意点
-
:has()は「親から子を逆走査」するため、パフォーマンスコストが高い とされています。
→ なるべくUI直結のシンプルな条件に限定して利用しましょう。 - フォールバックが必要な場合は
@supports selector(:has(*)) {
/* :has() が使えるブラウザでのみ適用 */
}
🌍 ブラウザ対応状況
- ✅ Chrome / Edge / Safari / Firefox いずれも対応済み
- ❌ 古いAndroidブラウザやIEは非対応（実質考慮不要）
実務での利用も安心できる段階に入りました。
✅ まとめ
-
:has()を使うと JSレスで「親 → 子の条件分岐」 が可能 - フォームエラー・カード強調・アコーディオン開閉など、UI改善に直結
- ただし複雑に使いすぎると保守性やパフォーマンスに影響あり
Discussion