基本のcss疑似クラス:has()を振り返ってみよう！

ブログをご覧の皆様こんにちは、デザイン戦略部のJKです。
今回は基本のcss、疑似クラス:has()について振り返ってみたいと思います。

:has()の使い方

子要素の中に指定した要素がある場合にスタイルを利かせる事ができます。
例えば以下のようなhtml,cssだと、

html

<div class="hoge">
    <p></p>
    <p></p>
</div>
<div class="hoge">
    <p class="test"></p>
    <p></p>
</div>
<div class="hoge">
    <p></p>
    <p></p>
</div>

css

.hoge:has(.test) {
    font-size: 14px
}

子要素にtestのクラスを持つhoge要素にだけ、スタイルが効きます。
とはいえこの例だと利用シーンが思い浮かばないかと思います。
そこで次の例です。

html

<div class="hoge">
    <h2></h2>
    <p></p>
    <p></p>
</div>
<div class="hoge">
    <h3></h3>
    <p class="test"></p>
    <p></p>
</div>
<div class="hoge">
    <h3></h3>
    <p></p>
    <p></p>
</div>

css

.hoge:has(h2) {
    font-size: 14px
}

この指定だとh2を子要素として持つhogeに対してスタイルが適用されます。
wordpressなどにある記事コンテンツの場合、こういった構造のhtmlはよく見られるのではないでしょうか。
h2を子要素に持つ親要素に対してのみ、borderやpadding等を加えて特別感を出す、など。

直近のマークアップで役立ったシーン

最近、表の中で列が増減する動的なページのマークアップを行いました。

イメージとしてはこの形です。
その際に列の数に応じてデザインを変える、というのがデザイン要件でした。

例えば「金額2」の列がある場合は注記を表示するという要件を、hasを用いて実現できます。

html

<div class="wrap">
    <h1>テスト表</h1>
    <table>
        <tr>
            <th>日付</th>
            <th>名前</th>
            <th>金額</th>
            <th>金額2</th>
        </tr>
        <tr>
            <td>
                2023/1/1
            </td>
            <td>
                テスト様
            </td>
            <td>
                10,000円
            </td>
            <td>
                20,000円
            </td>
        </tr>
        <tr>
            <td>
                2023/1/1
            </td>
            <td>
                テスト様
            </td>
            <td>
                10,000円
            </td>
            <td>
                20,000円
            </td>
        </tr>
        <tr>
            <td>
                2023/1/1
            </td>
            <td>
                テスト様
            </td>
            <td>
                10,000円
            </td>
            <td>
                20,000円
            </td>
        </tr>
    </table>
    <p class="attention">
        ※金額2は暫定です
    </p>
</div>

css

.attention {
    display: none;
    color: #666;
    font-size: 12px;
}
table:has(th:nth-child(n+4)) + .attention {
    display: block;
}

まず注記は非表示にしておきます。
次にtableの中のthが3つ以上要素を持っていれば、その隣にある注記を表示させると指定します。
指定の内訳としては以下のようになります。

• table:has(th:nth-child(n+4)) = 3つ以上thをもっているテーブル
• + .attention = そのテーブル直後のattentionをclassとして持つ要素

少し複雑ですかね？
テーブルの隣の要素という指定ではなく、もっとシンプルにテーブル内の要素に対しての指定も勿論可能です。

「金額2」の列がある場合にthの背景色を変えてみました。

css

tr:has(th:nth-child(n+3)) th {
    background-color: #fff;
    color: #000;
}

上記でthを3つ以上持つtrの子要素thに対しての指定となります。
同様の形でtdやtable自身に対してもスタイルをあてることができます。

総括

今回紹介させていただいた実例のような形で、動的ページほど:hasを使えるシーンが多いです。
逆に静的ページであれば、スタイルをあてたい要素に対してclassを付与すれば済む話ですので、あまり活躍しないかもしれないですね。
昔は何でもJSで実装するシーンが非常に多かったと思いますが、何事もcssのみで実装できればそれに越したことはありません。
また:hasのように、基本のcssほど一工夫すれば、上手い使い方ができることを多く感じます。
応用は基本の積み重ね、ということで基礎的な教材を読み漁っている今日この頃です。

ではまた次回！