2023年12月に新しくリリースしたFirefox 121が、ついに:has()擬似クラス利用可能となりました。

これですべての主要なWebブラウザでの使用が可能となったため、今後使える場面が増える:has()擬似クラスを今回は紹介します。

:has()擬似クラスとは？

CSSの疑似クラス関数で、:has()擬似クラスで指定した要素がある場合にのみスタイルを適用できる新機能です。

:has()擬似クラスでは、以下のこともできるようになります。

1. 特定のクラスが付いている子要素を持つ親要素だけにスタイルを適用できる（クラス名で指定できる）
2. 直後に特定の弟要素がある兄要素にスタイルを適用できる（＋で指定できる）

:has()擬似クラスの書き方

子要素に.pinkのクラスがある親要素にスタイルをあてる指定

.boxの直後にspanタグがある指定

上記のように、これまでは親要素の中にある子要素にはスタイルをあてることができてもその反対はできませんでしたが、:has()擬似クラスを使うことで可能になります。

次回は、:has()擬似クラスを使った使用例を紹介します。