【CSS】:has()疑似クラス

Chrome 105で:has()がサポートされるようになったので使い方を調べた

developer.mozilla.org

:has()は引数として渡されたセレクターに該当する要素をもつ要素にスタイルをあてることができる

例えば、直子要素がimgであるa要素を選択する場合は次のようになる

a:has(> img)

これは待望の機能

ただ、どうやらjQueryにも同じ書き方をする機能があり、それと競合するみたい

www.publickey1.jp

自身のサイトでは使っていないが、気をつけたい

他参考

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

Chromeのバージョンが105になったのでCSSの:has()とContainer queriesが使えるようになった - Qiita