【CSS】子要素から親要素を指定する-疑似クラスhasについて-

「CSSで特定の子要素を持つ親要素を指定できたらいいのに。」

自分で全てのHTMLを書いていればそんな悩みもなかった。しかしプラグインを使用したり、既存ソースを使用して変更を最小限にしたい場合だと、意外とこの悩みは現実に発生する。

その質問への回答としては疑似クラスhasを使用するということ。

例

下記のようなHTMLがあった際に、pタグが直後にあるdivタグを指定したい場合を例に見る。

<div>
   <h1>h1タグのあるdivタグ</h1>
</div>
<div>
   <p>pタグのあるdivタグ</p>
</div>

この場合、CSSで下記のように書くことで子要素にpタグを持つdivタグを指定することができる。

div:has(p){
   background:red;
}

pタグのあるdivタグ