こんにちは。
エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。
今回は2023年12月にFirefox（121）が対応したことにより主要ブラウザが完全対応となった、CSSの擬似クラス:has()についてその概要や使用方法についてお話したいと思います。
Firefoxもついに対応
Firefox120以前では:has()は対応していませんでしたが、今月リリースされたFirefox121ではついに対応することになり、主要ブラウザでは完全対応となりました。
2023年12月25日（メリークリスマス～）時点の各ブラウザでの対応状況は以下の通りです。
| ブラウザ | バージョン |
|---|---|
| Google Chrome | 105以降 |
| Microsoft Edge | 105以降 |
| Safari | 15.4以降 |
| Firefox | 120以降 |
| Opera | 104以降 |
| iOS版Safari | 15.4以降 |
| Android版Google Chrome | 105以降 |
| Android版Firefox | 121以降 |
| Android版Opera | 72以降 |
| Android WebView | 105以降 |
なお、対応状況は今後変化する可能性があります。使用前にCan I use...などで確認してください。
そもそも:has()とは？
そもそも:has()とはどんな擬似クラスなのでしょうか。MDNでは以下のように紹介されています。
:has()は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。
簡単に言い換えると、:has()は指定した要素がある場合にのみスタイルを適用できる擬似クラスです。
条件分岐については、
- 要素の存在の有無
- 要素の個数
- 要素の属性の値
によって適用するスタイルを変化させることができます。
どうやって使うの？
前項でもご説明した通り、:has()を使用することにより特定の要素の有無などで条件分岐をすることにより適用するスタイルを変更することができます。
例えば、「3つ並ぶアイテム内の画像のうち、xmas.jpgという画像を含む要素のみ境界線色を赤に変えたい」としましょう。
スタイルの条件分岐なしに作ると
まずはスタイルの条件分岐なしに作ってみましょう。
画像付きのアイテム（.item）を3つ並べて、それぞれ左から順にhalloween.jpg→xmas.jpg→halloween.jpgと画像を挿入します。
<ul> <li class="item"> <img alt="" class="item__image" src="halloween.jpg" height="320" width="480" /> </li> <li class="item"> <img alt="" class="item__image" src="xmas.jpg" height="320" width="480" /> </li> <li class="item"> <img alt="" class="item__image" src="halloween.jpg" height="320" width="480" /> </li> </ul>
このままですと境界線の色は同じままです。
:has()を使って条件に合った要素のスタイルを変える
今回のお題は「xmas.jpgという画像を含む要素のみ境界線色を赤に変えたい」ですので、画像のクラス名と属性を.itemの擬似クラス:has()の引数に指定することで条件分岐をすることができます。
引数は.item__image[src='xmas.jpg']と、クラス名→属性の順に指定します。
※Google Chrome 120からPure CSSでもCSS Nestingに対応しているため入れ子にしています。
.item { &:has(.item__image[src='xmas.jpg']){ border: 2px solid red; } }
xmas.jpgの画像を含む要素のみ境界線色を変えることができました。
さいごに
今回はCSSの擬似クラス:has()についてその概要や使用方法についてご紹介しました。
エキサイトホールディングス Advent Calendar 2023では弊社のエンジニア・デザイナーによる記事が多数公開されていますので、ぜひご覧ください！
ご精読ありがとうございました。
