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

CSSで特定の子要素を持つ親要素にスタイルを適用させる方法についてサンプルコード付きで解説します。現状各ブラウザでは:has()の擬似クラスは使えないため、代替となる方法の紹介です。

コンテンツ [表示]

  1. 1CSSで特定の子要素を持つ親要素にスタイルを適用したい
  2. 2CSSで特定の子要素を持つ親要素にスタイルを適用する方法

CSSで特定の子要素を持つ親要素にスタイルを適用したい

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

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

あわせて読みたい
:has()
CSSの:has()はCSS4で定義されている擬似クラスの1つで引数として渡されるセレクタに一致する要素が1つ以上ある要素を表します。例えば特定の子要素を持つ親要素といった指定も可能です。使い方やブラウザの対応状況を解説します。

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

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

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

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

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

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

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

あわせて読みたい
addClass()
jQueryのaddClass()はセレクタでマッチした要素に対して、addClass(class)の引数で指定したクラスを追加するメソッドです。使い方をサンプルコード付きで解説します。

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

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次