CSSだけで特定の子要素を持つ親要素を指定する方法(hasの使い方)

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

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

【結論】:has()を使う

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

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

例：画像を含む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>

兄要素を指定可能

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

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

<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()を使う

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

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