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


こんにちは、森田です。
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

2023年1月現在の Can I use のスクリーンショット

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

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

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

Firefoxの about:config 画面

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

参考: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() を思い切り使いたいですね。

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

タグ


投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。