【Firefox】 CSS の擬似クラス「:has()」を使えるようにする方法

こんにちは、さち です。

先日、Firefox で ユーザーCSS を書いている時に、CSS の擬似クラスの :has() を使いたいことがありました。

Chrome や Safari は対応しているんですが、Firefox は未だに正式対応していないんですよね……。

ただ、Firefox でもベータ的な対応はしているので、使えるように設定してみます。

操作手順

1. アドレスバーに about:config と入力して、Enter キーを押します。
   
2. 「危険性を承知の上で使用する」をクリック。
   
3. 検索に layout.css.has-selector.enabled と入力。
   
4. 下に表示された同じ名前の項目をダブルクリックして、値を「true」にします。
   

これで、Firefox でも CSS の疑似クラス :has() が機能するようになりました。

:has() の機能自体は Firefox 103 から対応しているので、早く正式に実装して欲しいですね。Chrome や Safari はすでに正式に実装済みですし……。

各ウェブブラウザーの対応

各ウェブブラウザーの :has() の対応は、こちらのサイトで確認できます。CSS を使用する際の目安にして下さい。

:has() CSS relational pseudo-class | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w

caniuse.com

【おまけ】 :has() が機能するかの簡易テスト

いま閲覧中のウェブブラウザーで、:has() の機能が有効／無効どちらなのか下に表示されます。（簡易的なテストなので過信はしないで下さい）