Firefox 121でCSSの関係擬似クラス:has()に対応し⁠主要ブラウザすべてで使用可能に

12月19日、Firefox121がリリースされた。このバージョンで、CSSの関係(リレーショナル)擬似クラス:has()に対応した。ほかの主要ブラウザ(Chrome、Edge、Safari)ではすでに対応しており、これで:has()が一般的に使えるようになったと言える。

:has()を簡単に説明すると、あるセレクタAに結合子>+~などの明示的な結合子、または暗黙的な子孫結合子)を使って相対するセレクタをhas()内に記述し、その関係性を実際に持つ場合にセレクタAにスタイルを適用できるという擬似クラス。

:has()を使うことで、子の要素に○がある要素、次の要素が△である要素といった、これまでできなかったかたちでスタイルを適用できるようなり、より効率的にCSSを書けるようになる。

:has()の具体的なルールは次のとおり。詳細は仕様を参照のこと

  • :has()内には相対セレクタの羅列<relative-selector-list>[1]が記述でき、その記述された相対セレクタのいずれかを持つ場合に適用される。
  • ただし、:has()内での:has()は無効[2]
  • また、::beforeなど擬似要素は:has()内の有効なセレクタではない[3]

たとえば、次のように:has()が記述できる。

See the Pen :has() test by k_taka (@peaceroad) on CodePen.

おすすめ記事

記事・ニュース一覧