【CSS革命】ついに親要素を操作可能に！疑似クラス「:has()」の実務的な使い方

Web制作をしていると、こんな壁にぶつかったことはありませんか？

「カードの中に『重要』というラベルがある時だけ、カード全体の背景色を赤くしたい」
「チェックボックスにチェックが入った時だけ、親の行（枠）の色を変えたい」

実はこれまで、CSSだけでは「子要素を見て、親要素のスタイルを変える」ことは不可能でした。そのため、わざわざJavaScript（jQueryの closest() や parent() など）を使ってクラスを付与するという、面倒な処理を書くのが常識でした。

しかし、時代は変わりました。最新のCSS疑似クラス:has()の登場により、ついにCSSだけで「親要素の操作」ができるようになったのです。今回は、このCSSの歴史を変えた革命的な機能の実務的な使い方を徹底解説します。

1. 「:has()」とは何か？（基本の仕組み）

:has() は、「特定の要素を持っている場合」にだけスタイルを適用する疑似クラスです。

/* 【構文】 .card の中に .is-important がある場合、.card の背景を赤にする */
.card:has(.is-important) {
    background-color: #ffcccc;
}

これの何が凄いかというと、スタイルが適用されるのは「中のラベル（子）」ではなく、「カード全体（親）」だという点です。長年のCSSの限界（親から子へしか操作できない）を完全に突破した画期的な機能です。

2. 実務で役立つ具体例（動作デモ）

言葉で説明するより、実際に動くものを見た方が早いです。以下の2つのデモをご覧ください。

デモ①：特定の子要素がある時だけ、親のデザインを変える

以下の2つのカードは、HTMLの構造は全く同じ <div class="kz-has-card"> です。しかし、下のカードにだけ <span class="is-important"> を入れています。

CSSには .kz-has-card:has(.is-important) と書かれているため、ブラウザが自動的に「あ、このカードの中には重要ラベルがあるな」と判断し、JavaScriptを一切使わずに親要素の枠線と背景色を赤く変更しています。

デモ②：フォームの操作に連動させる（動的変化）

さらに強力なのが、ユーザーの操作（チェックボックスなど）に連動できる点です。
以下のチェックボックスをクリックしてみてください。

チェックを入れた瞬間、親であるカード全体がオリーブ色になったはずです。これは以下のCSSで動いています。

/* 中に「チェックされたチェックボックス」を持つカードを装飾する */
.kz-has-card:has(input[type="checkbox"]:checked) {
    border-color: #7C974C;
    background-color: #f2f5ec;
}

これまでは絶対にJavaScriptが必要だった「動的なUI変化」が、たった数行のCSSで完結してしまいます。

3. ブラウザの対応状況（もう実務で使えます！）

特別な理由がない限り、今のWeb制作の実務案件ではバリバリ使って問題ありません。

まとめ：脱JavaScriptの最終兵器

:has() の登場により、我々Web制作者は「UIの見た目の変化」に関するJavaScriptコードを大幅に削減できるようになりました。これはサイトの軽量化（パフォーマンス改善）や、保守性の向上に直結します。

「親要素の操作はCSSの :has() に任せる」。これからのモダンコーディングの常識として、ぜひマスターしておきましょう！