CSSで特定の子要素を持つ親要素にスタイルを適用する方法！

CSSで例えばa要素を子要素に持つ親要素、.sampleというクラスの子要素を持つ親要素など特定の条件の子要素を持つ親要素に対してスタイルを適用したいケースを考えます。

この場合は実はCSS3では上記にドンピシャで使えるセレクタはありません。ただCSS4では:has()という擬似クラスが登場する予定で:has()を使うことで特定の条件の子要素を持つ親要素という指定が簡単に可能になります。

ただしCSS4の:has()に対応しているブラウザは現状ないため、現在のCSS3のバージョン下では別のやり方が必要になります。

そこで今回はCSSで特定の子要素を持つ親要素にスタイルを適用する方法についてサンプルコード付きで解説します。

結論からお伝えるすると、特定の条件の子要素を持つ親要素にスタイルを適用するにはJavaScriptを使う必要があります。今回はjQueryを使って実現してみたいと思います。

実はjQueryのセレクタ指定では:has()が使え、特定の子要素を持つ親要素を表す事が出来ます。

下記のサンプルコードを見てみましょう。

上記のサンプルコードではjQueryの:has()のセレクタが使えるため、:has()で指定したセレクタを持つ親要素に対して.addClass()でクラスを付与しブラウザ上の見た目を変えています。

このようにjQueryを使うことで簡単に特定の条件の子要素を持つ親要素の指定が可能になります。