個人的にずっとこんなのが欲しい。と思っていた:has()。

CSS4で追加されるものなので現場ではまだ使えないですが、とにかく私は期待している擬似クラスです。

:hasクラスって何ができる？

擬似クラスとはa:hoverなどでよく使うと思いますが、a要素がhoverの時。と特定の状態について指定できます。

擬似クラスについてはこちらに詳しく書かれています。
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

:has()は一体どのような状態について指定できるのか。ですが、jQueryを使ったことがある方はあのhas？と思うかと思います。そのhasです。

:has()を使えるようになると親要素に対して指定できるようになります。
例えばaタグの中にimgがあるものだけスタイルを追加したい。という時に

a:has(>img)

とかけるようになります。

今までは親要素のスタイルを調整するには、jQueryなどで指定できましたが、これがCSSのみで指定できるようになります。

親要素に対して指定したいことって結構あるのになんでCSSだけでできないんだろう。とほんと思っていたので、:has()を使える日が待ち遠しいです。

:has() - MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/:has