CSSの:has()疑似クラスの便利な使い方のまとめ

CSSの:has()疑似クラスが主要ブラウザでサポートされ、喜んでいる人も多いと思います。今まではJavaScriptを使用しなければできなかったことが、:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。 たとえば、子に画像がある場合とない場合、子の数が奇数の場合と偶数の場合、セレクタを追加したり変更することなく指定できます。また、コンテンツやフォームなどにも便利な使い方がたくさんあります。 :has(): the family selector by Jhey Tompkins 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 先日リリースされたChrome 105, Edge 105で:has()疑似クラスはサポートされ、コンテナクエリ（@containe

[coliss]

CSSの:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。

[sucelie]

そんな使うかわからん機能ばっかり作らずにscssみたいなネスト実装してくれ。何ならscssそのものを読めるようにしてくれ。

[aox]

もうプログラミングですね

[maroh]

チェックボックスやラジオが選択されてる時の外側をいじりやすくなったかも

[toblog]

コメントを付けないとぱっと見では訳がわからない

[advancive61]

キレイに書ける気がしない。もうCSSは諦めてる。。

[i_am_aoi]

“ ”

[chiba1008]

進化って、なんだろうな…

[ducktoon]

これはありがたい

[AzuLitchi]

ﾊｽﾊｽ

[yoshi-na]

慣れないと難しく感じるけれど、出来ることの幅が断然増える

[soratomo]

ポテンシャルある。これもカスケードか。

[eartht]

FFに適用されたらもう利用開始ですなぁ

[mayumayu_nimolove]

ほんとに便利でよく使いそうなのだけ覚えたい。

[arapro]

Can I useの緑が足りない

[ex02xx]

hasのせいでjQueryがヤバいらしい

[kvx]

cssの考え方が変わるけど、コンポーネントが外側に広がる難しさが出てくるのかな。