🎯
CSSだけで親要素の条件分岐！`:has()`実用解説
CSSだけで親要素の条件分岐！:has()実用解説
📝 はじめに
これまで「子要素の有無や状態に応じて親要素を変化させる」には JavaScript必須 でした。
しかし今では :has() セレクターを使うことで、CSSだけで完結できます。
2025年現在、主要ブラウザのサポートも十分進み、実用的に使える場面が増えてきました。
今回は基本構文から実例、注意点までまとめます。
🎮 まずは動くデモで確認！
実際に動作する3つの実用パターンを確認できます：
👆 バッジの有無、フォームのエラー、アコーディオンの開閉で親要素のスタイルが変わるのを確認できます！
🔧 基本文法
.parent:has(.child) {
background: pink;
}
上記のように書くと、.parent 内に .child を含む場合だけ背景をピンクにできます。
つまり「子要素に応じて親を装飾する」ことが可能になります。
💡 実用パターン
1. カードのバッジ表示で色分け
<div class="list-item">
<span class="label-s-scout">新着</span>
<p>記事タイトル</p>
</div>
.list-item:has(.label-s-scout) {
background: #fffbe6;
}
2. 入力フォームのエラーを親ごと強調
<form>
<input type="email" required>
<button type="submit">送信</button>
</form>
form:has(input:invalid) {
border: 2px solid red;
}
3. アコーディオンの開閉スタイル
<details class="accordion">
<summary>詳細を見る</summary>
<p>ここに詳細情報が表示されます</p>
</details>
.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