Chrome 105で:has()
がサポートされるようになったので使い方を調べた
:has()
は引数として渡されたセレクターに該当する要素をもつ要素にスタイルをあてることができる
例えば、直子要素がimgであるa要素を選択する場合は次のようになる
a:has(> img)
これは待望の機能
ただ、どうやらjQueryにも同じ書き方をする機能があり、それと競合するみたい
自身のサイトでは使っていないが、気をつけたい
他参考
CSSの:has()疑似クラスの便利な使い方のまとめ | コリス
Chromeのバージョンが105になったのでCSSの:has()とContainer queriesが使えるようになった - Qiita