【意外と便利！】特定の子要素を持つ親要素にcssスタイルを適用する方法

Web2017年3月27日

「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。そこで、jsを使って実現する方法を本記事ではご紹介いたします。jQueryでもVanilla JS（生のjavascript）でもどちらでも可能ですので、サイト環境に合う方法をどうぞお使いください。

サンプルコード

html

<ul class="hoge">
<li><p>特にスタイルを当てる必要なし</p></li>
<li><p>特にスタイルを当てる必要なし</p></li>
<li><p class="moge">これの親要素liにだけcssを適用したい</p></li>
<li><p>特にスタイルを当てる必要なし</p></li>
<li><p>特にスタイルを当てる必要なし</p></li>
</ul>

例えば上記のhtmlにおいて「p.mogeを子要素に持つ親要素liにだけcssを適用したい」場合、後述のjsとcssで実装することが可能です。

jQueryで記述する場合

(function () {

$(function(){
	$("ul.hoge li:has(p.moge)").addClass("parent");
});

})(jQuery);

Vanilla JS（生のjavascript）で記述する場合

let elements = document.getElementsByClassName("moge");
Array.prototype.forEach.call(elements, function (element) {
    element.parentNode.classList.add("parent");
});

いずれかのjsを実行すると、DOM上は以下のhtmlになります。

<ul class="hoge">
<li><p>特にスタイルを当てる必要なし</p></li>
<li><p>特にスタイルを当てる必要なし</p></li>
<li class="parent"><p class="moge">これの親要素liにだけcssを適用したい</p></li>
<li><p>特にスタイルを当てる必要なし</p></li>
<li><p>特にスタイルを当てる必要なし</p></li>
</ul>

jQueryで実装する場合は、:has()メソッドを使用することでp.mogeを子要素として持つ親要素liをセレクタ指定し、.addClass()メソッドでclass「.parent」を付与します。

Vanilla JS（生のjavascript）で実装する場合は、getElementsByClassNameで.mogeをセレクタとして取得し、forEach()メソッドで配列に格納しつつマッチした要素の親要素をparentNodeで指定し.parentを付与する、といった処理をしています。

いずれにせよこれらのjsでのDOM操作が実現できれば、あとは「li.parent」に対し任意のcssを用意するだけです。

css

ul.hoge li.parent{
	font-weight:bold;//任意のcssを記述
}

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。p.mogeを子要素として持つ親要素li.parentのみ、テキストが太字になっていることがご確認いただけるかと思います。

余談

ちなみに、css4からは疑似クラス「:has()」を活用し以下のようにcssを記述することで、jsを使わずともcssのみで特定の子要素を持つ親要素へのcss指定が可能になります。

ul.hoge li:has(> p.moge) {
    font-weight:bold;
}

まとめ

この手のケースに迫られたことが無かったので、恥ずかしながらcss3で「特定の子要素を持つ親要素を指定するセレクタ」が存在しないことを今回初めて知りました。まだまだcss4が使えるようになるのは先の話だと思いますので、当面ご紹介したようなjsと組み合わせて実装をするとよいでしょう。本記事がご参考になれば幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。