特定の小要素がある親要素にCSSをあてる方法

  • ブックマーク
  • -
    コピー
WordPressなどのCMSを利用したウェブサイトを運用していると「この要素を持った親要素のマージンをなくしたい」などの状況にでくわすことが多々あります。対応策をいくつか紹介します。

<p>
    <span>a</span>
</p>
<p>
    <span>o</span>
</p>
<p>
    <span>e</span>
</p>
<p>
    <span>u</span>
</p>
<p>
    aoeui
</p>
<p>
    <span>i</span>
</p>
<p>
    aoeui
</p>

このようにp要素が続く場合と単体の場合でマージンを変えたい場合、なおかつCMSの仕様に依存するため特定の小要素を持つ親要素にクラスを指定できない時の対処方法です。

対応方法

CSS4で:has (擬似クラス)を使う

CSS3では特定の小要素がある親要素にCSSをあてる方法がないらしく、CSS3の次にくるであろうCSS4で実装予定の機能 :has (擬似クラス) を利用することで実装が可能となります。
:has()の説明や各ブラウザの対応状況
しかし前述の記事でも確認できるとおり、現状ではどのブラウザでも対応できないためしばらくは別の方法を模索するしかありません。

JavaScriptで:has(メソッド) を使う

CSSでは対応できませんがjQueryの:hasメソッドを活用することで、特定のクラスを付与し上書きすることは可能です。

<script src="https://code.jquery.com/jquery-3.4.1.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
    $("p:has(span)").addClass("parent");
});
</script>

まとめ

CSS4がやってきて:has (擬似クラス) が利用できるまではjQueryの:hasメソッドを利用して特定の要素にクラスを付与するとよいでしょう。 他に良い方法があればコメントなどで教えていただけると嬉しいです!

参考URL

  • ブックマーク
  • -
    コピー

この記事を書いた人

Susumu Seino

1988年 東京都足立区生まれ。瀬戸内海の小島と東京に拠点を持ち、2020年からは夫婦でアドレスホッピングを計画しているデジタルノマドな日本人。デジタルパブリッシング代理店のアニューマの創業者です。