これはなに?
:has()
というCSSの擬似クラスが、2023年12月19日から、FirefoxもSupportされるようになりました。
Firefox 121 for developers - Mozilla | MDN
詳しい挙動や使い方は、他の素晴らしい記事にお任せし、この記事では :has()
の細かい挙動などではなく、ついに主要ブラウザで使えるようになった喜びをただ噛み締めたいと思います。
Chrome、Safari、Firefoxを最新版にして、デモをご覧ください
:has()
とは
:has() - CSS: カスケーディングスタイルシート | MDN いわく
:has() は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、その要素から辿ってアンカーとして少なくとも一つの要素とマッチする場合に、その要素を表します。この疑似クラスは、相対セレクターリストを引数として取ることで、参照している要素に関して親要素や前の兄弟要素を選択する方法を提供します。
誤解を恐れず簡単に言いますと、今までCSSは子要素にしか指定ができませんでしたが、親要素も指定できるようになります。
デモ
See the Pen has by gilly135 (@gilly135) on CodePen.
サポートブラウザ
:has() - CSS: カスケーディングスタイルシート | MDNを見ると、Firefoxだけ pre-release versionですが、2023年12月19日から主要なブラウザはサポートが来ました!
これからのマークアップがどのように変化していくのか楽しみですね!