韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

特定の子要素を持つ親要素の指定方法

このブログで、投稿記事の本文に、画像を入れたとき、中央寄せの設定をしているのに、p要素の中にa要素、その中にimg要素という構造になっていて、p要素が左寄せになっていたため、うまく中央寄せが効きませんでした。

そこで、img要素を持つp要素だけ、中央寄せ(text-align:center)の指定にしました。
調べてみると、CSS3のセレクタでそのような指定はできないということなので、jQueryのhasフィルターを使ったら、無事できました!

$(function(){
 $("p:has(img)").addClass("kiji__img");
});

上記のコードで、img要素を持つ親要素のpに、「kiji__img」というクラス名をつけています。
そして、CSSで、

.kiji__img {
  text-align: center;
}

とすれば、無事、img要素が入っているp要素にだけ「kiji__img」というクラス名が付けられ、そこに中央寄せが効くので、画像を中央寄せにすることができました。

プレビュー↓↓

favicon

こちらソースコードを見ると、ちゃんと「kiji__img」というクラス名が付いています。

ちなみに、CSS4からは特定の子要素を持つ親要素の指定ができるそうです。

スポンサーリンク