めちゃ便利！CSSの「:has()」を学ぼう【疑似クラス】

:has() 疑似クラスとは

:hasは比較的新しい疑似クラスでとても便利な機能を持っていますが、ブラウザのサポートやjQueryとの兼ね合いから業務での使用を見送ったりしている場合もありました。しかしすでにそれらの問題はクリアされているので、安心して使用できる環境となっています。

:has() の機能

:has()は特定の条件に当てはまる要素を指定することができる疑似クラスです。具体的には、

CSSでは:has()ができるまで、これらの要素の選択にはクラス名を付けるなどのひと手間が必要でした。しかし:has()の登場により、条件によって要素の選択ができるようになり、今までjavascriptなどを使用しなければ実現できなかった様な動きもCSSだけ可能になりました。

特定の子要素を持つ親要素を選択する

<p>当店は辛口カレーのお店です。</p>
<p>小さいお子様や辛さが苦手な方は<strong>ご注意</strong>ください。</p>

この様なコードで子要素としてstrongを含むpを選択したい場合は次の様に記述します。

p:has(strong) {
      color: red;
}

この様に子要素にstrongを持つpのみが選択されます。子要素は直下でなくとも（孫要素以下でも）指定することが可能です。( )内には要素名（タグ名）以外にもクラス名などを指定することも可能です。

特定の子要素を直下に持つ親要素を選択する

<section>
    <h1>八百屋さん</h1>
    <p>当店では以下の商品を取り扱っています。</p>
    <section>
      <h2>野菜</h2>
      <p>様々な野菜を取り扱っています。</p>
    </section>
    <section>
      <h2>果物</h2>
      <p>様々な果物を取り扱っています。</p>
    </section>
</section>

この様なコードでh2を持つsectionのみ背景色を変えたい場合は、直下セレクタを使用することで可能になります。

section:has( > h2) {
      background: #ccc;
}

直下セレクタを使うことで、下層のsectionのみを選択することが可能です。

特定の隣接要素を持つ要素を選択する

<dl>
    <dt>野菜</dt>
    <dd>だいこん</dd>
    <dd>はくさい</dd>
    <dt>果物</dt>
    <dd>リンゴ</dd>
    <dd>みかん</dd>
</dl>

dd:has(+dt) {
      color: red;
}

( )内に隣接セレクタを使うことで、兄要素を選択することも可能です。この場合は隣接要素にdtを持つddが選択されます。