CSSの:has()疑似クラスの便利な使い方を徹底解説

先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。 たとえば、カードに画像がある場合、ナビゲーションに子メニューがある場合、ラッパーがある場合など、複雑なCSSが必要だったものやJavaScriptが必要だったものが簡単でシンプルなCSSで実装できます。 CSS Parent Selector by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに :has

[coliss]

指定した要素がある場合にのみスタイルを適用できる、CSSの:has()疑似クラスの便利な使い方を徹底解説。

[xlc]

つーか、:has() が使いたい局面なんて過去から山ほどあって、仕方なしにclassを追加してたってことだよ。「こんな時に使える！」じゃなくて「あのヘンテコなclassが不要になる」だと思うぜ。

[mohritaroh]

便利そうなんだけどFirefoxとEdgeのサポートが気になる

[kenjikana]

“:has(input:focused) {”

[miruto]

これは「将来」使えそうだな！FirefoxとEdgeが対応すれば使っていく

[nilab]

「CSSに新しいセレクタ:has()が登場し、特定の要素が親の中に存在するかなど、さまざまな要素を選択できるようになります」

[kijtra]

「親要素に含まれてるかどうか」という説明だと、子要素に指定するのかと思っちゃう。

[otchy210]

あー、なるほど。form:has(input:focused) はめちゃくちゃ便利だな。