芝生やDIY等のライフハックやWeb制作情報を発信するメディア

メニューを開く

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

Web2017年3月27日

「特定の子要素を持つ親要素にcssを適用したい」というケースはしばしばありますが、css3を駆使してもこれを実現するセレクタは存在しません。
そこで、jsを使って実現する方法をご紹介いたします。

サンプルコード

<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

(function () {

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

})(jQuery);
  • jQueryを読み込んでいる場合のスクリプトとなります

この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>

あとは、jsで付与したclass「.parent」に任意のcssを記述すればOKです。

css

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

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

余談

ちなみに、css4からは以下のように記述することで、cssのみによる特定の子要素を持つ親要素へのcss指定が可能になります。

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

まとめ

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

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

「Web」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

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

ページの先頭に戻る