2023年から使っていきたいCSS 〜疑似クラス :has() 〜

2023.1.11

学びの共有

こんにちは、森田です。
2023年初記事です。明けましておめでとうございます。
本年も Gaji-Labo よろしくお願いいたします。

さて、年も変わったことですし本年からなにか新しいことを始めたいと思います。
今年は疑似クラス :has() を使えたらいいなと願っております🙏

疑似クラス `:has()` とは

/* img要素を含んでいるa要素を指定 */
a:has(> img) { style }

/* p要素が隣接しているh1要素を指定 */
h1:has(+ p)

擬似クラス :has() は、その名のとおり引数の中で指定したセレクタを含んでいる要素を指定します。

今までになかった親要素を指定できるセレクタとなりCSSで出来ることが格段に増えそうです。
このような場合、今までは JS でクラス付与などをしていたのでそれが CSS のみで実現できるのは素晴らしいです。

仕様

対応ブラウザ

2023年1月現在の Can I use では Firefox以外のほぼ全ての最新版ブラウザで使うことができます。

https://caniuse.com/css-has

Firefox は設定をオンにすれば使用するこはできますが、デフォルトではサポートされていません。

Firefoxの `:has()` の対応状況について

2023年1月現在、Firefox は about:configページより layout.css.has-selector.enabled の設定を true にすることで使用することができます。

今年前半にサポート予定？

参考：418039 – Implement the :has() pseudo class

Firefox のバグ管理システムである Bugzilla に15年前(!!)から立てられている :has() サポートについてのIssue に先日 Mozilla の Emilio さんが以下のようにコメントしています。

We plan to work on this in the first half of this year.
via: https://bugzilla.mozilla.org/show_bug.cgi?id=418039#c62

今年の上半期に取り組む予定とのことですので年内にはサポートされるかもしれません。
何卒お願いします。

まとめ

今年は CSS Level 4 で策定されていたものが色々とサポートされて CSS がより便利になることが期待できそうです。

:has() も Firefox のサポートがされれば今年から積極的に使っていこうと思います。
しかし、最近では Firefox のシェアが低下しており、最大手ネットTV や大手ECサイト、ネットバンクなどもFirefox をサポート対象外にしているケースが増えてきているので、 Firefox をサポート外にする案件を受けることもあるかもしれません。
そうなれば :has() を思い切り使いたいですね。