12月19日、Firefox121がリリースされた。このバージョンで、CSSの関係:has()
に対応した。ほかの主要ブラウザ: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_