【ハズセレクター】
:has() セレクター とは？
最終更新:
💡 「この子を持つ親」も「この要素の前の兄弟」も選べるCSS
引数に書いた相対セレクターに合う要素があるかを条件に、対象要素を選ぶCSSの擬似クラス。子孫を含む親や、特定の兄弟要素より前にある要素を選ぶスタイルに使える。
📌 このページのポイント
- form:has(input:invalid)は、不正な入力を含むフォームを選ぶ
- :has(> img)は直接の子、:has(+ p)は直後の兄弟を条件にする
- 選択した要素にCSSを適用し、入力の状態などに応じて見た目を変えられる
- :has()の中に別の:has()は入れられず、確認する範囲を絞ることも大切
ひよこ :has()って普通のセレクタと何が違うの？
ペンギン先生 form inputはフォーム内のinputを選ぶよ。form:has(input)ならinputを含むform自体を選べる。従来も兄弟や状態を使うセレクターはあったので、CSSが親から子しか選べなかったという説明は正確ではないね。
ひよこ たとえばどんなふうに使うの？
ペンギン先生 form:has(input:invalid)にborderのスタイルを書くと、不正な入力を含むフォームの枠を変えられるよ。選ぶ条件と色などの指定は別。:has()だけで赤くなるわけではなく、ブラウザの入力検証の状態を条件にしているんだ。
ひよこ 親だけを選べるの？
ペンギン先生 子孫を条件にする.card:has(img)のほか、.card:has(> img)なら直接の子に限定できる。h1:has(+ p)は、直後にpがあるh1を選ぶ。pの親を選ぶわけではなく、兄弟の関係を条件にする例だよ。
ひよこ 組み合わせて使うこともできるの？
ペンギン先生 .panel:has(.active):not(:has(.error))なら、activeの子孫を含み、errorの子孫を含まないpanelを選べるよ。ただし:has()の引数の中に別の:has()は入れられず、擬似要素も指定できない。似た見た目でも書ける組み合わせには条件があるんだ。
ひよこ パフォーマンスは大丈夫なの？
ペンギン先生 DOMが変わると条件を確認し直すので、広い範囲や複雑な条件は負担になり得るよ。*:has(.something)のように対象を広げるより、部品のクラスや必要に応じた>・+で範囲を絞る。必ず問題ない、必ず全ページを走査するとは断定せず、実際の画面で確かめるんだ。
まとめ：ざっくりこれだけ覚えればOK！
「:has() セレクター」って出てきたら「子孫や後ろの兄弟を条件に、対象を選ぶCSS」と思えばだいたいOK！
📖 おまけ：英語の意味
「:has() pseudo-class」 ＝ 〜を持つ（擬似クラス）
💬 hasは「〜を持っている」という意味だよ。子孫を含む条件だけでなく、相対セレクターで後ろの兄弟との関係も指定できるんだ