ホームへ

CSSだけで特定の子要素を持つ親要素を指定する方法

2022年12月17日

「この子要素を持つ親タグにだけCSSを指定したい!javascriptは使いたくない!」

CSSだけで特定の子要素を持つ親要素を指定する方法を解説します。

【結論】:has()を使う

:has()は疑似クラスです。「A:has(B)」のように使い、Bの条件を満たすAに対してCSSを指定できます。

特定の子要素を持つ親要素を指定するには以下のような形になります。

親:has(子){}

例:画像を含むaタグを指定する

下記は「a:has(img)」と指定することでimgを子孫要素に持つaタグにCSSを指定しています。

<div class="example">
    <a href="#">
        <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
        直下が画像のリンク
    </a>
    <a href="#">
        <span>
            <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
        </span>
        spanを挟む画像のリンク
    </a>
    <a href="#">画像を含まないリンク</a>
</div>
<style>
.example a:has(img){
    border: 2px solid red;
    display: block;
}
</style>

例2:直下の子要素が画像のaタグを指定する

下記は「a:has(>img)」と指定することでimgを子要素(直下)に持つaタグにCSSを指定しています。

<div class="example2">
    <a href="#">
        <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
        直下が画像のリンク
    </a>
    <a href="#">
        <span>
            <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
        </span>
        spanを挟む画像のリンク
    </a>
    <a href="#">画像を含まないリンク</a>
</div>
<style>
.example2 a:has(>img){
    border: 2px solid red;
    display: block;
}
</style>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

兄要素を指定可能

:hasの応用で特定の弟要素を持つ兄要素も指定可能です。

下記は「div:has(+p)」と指定することでpを弟要素(直後)に持つdivタグにCSSを指定しています。

div

pタグ

div
aタグ
<div class="example3">
    <div>div</div>
    <p>pタグ</p>
    <div>div</div>
    <a>aタグ</a>
</div>
<style>
.example3 div:has(+p){
    border: 2px solid red;
    display: block;
}
</style>

【注意】FireFoxでは効かない

:hasは2022/12/17現在、FireFoxでは効きません。

最新の状況は下記サイトをご確認ください。

【まとめ】特定の子要素を持つ親要素を指定する方法

:has()を使う

特定の子要素を持つ親要素を指定するには以下のような形にする。

親:has(子){}

以上、CSSだけで特定の子要素を持つ親要素を指定する方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ