CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）で、すべての

[coliss]

CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができます。

[ryan_aircloset]

7,8年前からずっと待ってた:hasセレクタがついに使えるようになってきてたのか！これはめっちゃ嬉しいやつ！

[reboot_in]

“先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）”

[Syunpei]

この記事をおすすめしました:

[tech0403]

もともとjQueryとcssのセレクターの記述はある程度の互換性があるのだから、hasかcontainsどちらかに統一してほしかった

[kasuke18]

“:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。”

[yoshi-na]

支障なく使える日を待ってます

[umai_bow]

マジこれは革命

[cartman0]

子セレクタから親に辿らなくて良くなったのか

[retronics]

ずっと待ってた。

[queeuq]

hasがついに使えるようになってくるのかー。

[spark7]

chromeで試して変わらなかったので焦った。Containerクエリもまだだったか。

[ishikororororo]

おお〜！