:has() セレクターとは何ですか？

子要素や隣接要素の状態に基づいて親要素を選択できるCSSの擬似クラス。従来CSSでは不可能だった「親セレクタ」を実現し、JavaScriptなしで動的なスタイリングが可能になった。

:has() セレクターのポイントは？

子要素や後続要素の状態に応じて親要素を選択できる擬似クラスセレクタ。長年CSSに存在しなかった「親セレクタ」をついに実現した画期的な機能。JavaScriptなしで「チェックボックスが選択されたら背景を変える」などの動的スタイリングが可能

【ハズセレクター】

💡 「この子を持つ親」を指名できる、CSSが長年待ち望んだ親セレクタ

📌 このページのポイント

:has()セレクターのイメージ

ひよこ

:has()って普通のセレクタと何が違うの？

ペンギン先生

従来のCSSセレクタは「親 > 子」のように上から下への指定しかできなかったんだ。:has()を使うと「この子要素を含む親」のように、下から上への選択ができるようになったんだよ

ひよこ

たとえばどんなふうに使うの？

ペンギン先生

たとえば「form:has(input:invalid)」と書くと、バリデーションエラーのある入力欄を含むフォーム全体の枠を赤くできるよ。今まではJavaScriptでクラスを付け外ししていた処理がCSSだけで実現できるんだ

ひよこ

組み合わせて使うこともできるの？

ペンギン先生

もちろん。「:has(.active):not(:has(.error))」のように、:notや他の擬似クラスと組み合わせられるよ。「activeクラスの子を持つが、errorクラスの子は持たない要素」なんて指定もできるんだ

ひよこ

パフォーマンスは大丈夫なの？

ペンギン先生

ブラウザの実装は最適化されているから、通常の使い方では問題ないよ。ただし、ユニバーサルセレクタと組み合わせた「*:has(.something)」のようなパターンはページ全体を走査するので避けたほうがいいね。スコープを絞って使うのがコツだよ

まとめ：ざっくりこれだけ覚えればOK！

「:has() セレクター」って出てきたら「子要素の状態で親を選択できるCSSの親セレクタ」と思えればだいたいOK！

📖 おまけ：英語の意味

「:has() pseudo-class」＝〜を持つ（擬似クラス）

💬 英語のhasは「〜を持っている」という意味。「この子要素を持っている親」を選ぶセレクタだよ