１）:has()

特定の要素が親の中に存在するかどうかをチェックできる擬似要素です。
WordPress、Vue.js、Reactなんかを使っていると、
場合分け表示を結構使いますが、そんな時に便利です。
最近レイアウトにGridを使う機会が度々あるのですが、

例えば、画像がある時はAレイアウト、ない時はBレイアウトみたいな時に使います。
参考：https://coliss.com/articles/build-websites/operation/css/has-pseudo-class.html

Can I use

モダンブラウザは全て使えます。
https://caniuse.com/?search=%3Ahas()

デモ

See the Pen :has()の実例 by ituki_b (@ituki_b) on CodePen.

２）:user-invalid

今まであった:invalidと違い、「ユーザが操作した後」のエラー時に表示したい時に使います。

例えば、必須入力のフォームでエラー文言を出したい時などに使えます。

参考：https://coliss.com/articles/build-websites/operation/css/chrome-119-adds-4-new-css-features.html

Can I use

モダンブラウザは全て使えます。
https://caniuse.com/mdn-css_selectors_user-invalid

デモ

See the Pen :user-invalidテスト by ituki_b (@ituki_b) on CodePen.

３）fieldsetタグ

例えばフォームで名前という項目があるとして、label+input+あれば注釈やエラーなどを、
何かのタグで囲みたいかと思います。
この時に使えるのがfieldsetタグです。

アクセシビリティとしても優秀で、このタグを使うことによってtabキーで見出しのように簡単に移動ができる、
というのがとても便利で素敵だなぁと思います。
入力する時に上から行く時はともかく、間違ったなぁと思って下から戻る時にいちいちinputなどをフォーカスするのは大変だよなぁと感じていたので、解消できてよかったです。
これによってかなりフォームのHTMLも変わりました。

Can I use

モダンブラウザは全て使えます。
https://caniuse.com/?search=fieldset

デモ

See the Pen :user-invalidテスト by ituki_b (@ituki_b) on CodePen.

4）:nth-child(X of S)

@debiru さんの:nth-child() の "of S" 構文が最強な件についてを見て、推しに抜けがあるの気づきました。
今まで:nth-child()は並列の要素の何番目を指定するものでしたが、
:nth-child(X of S)では特定のclassの何番目を指定できます。
ずっと待ってた！
今までは純粋なCSSでできなかったので、jsでなんとかしてました。

例えば、.image-paragrafの奇数のものだけ画像を右に、
通常は左にしたい、みたいな時に使えます。

article :nth-child(odd of .image-paragraf)

Can I use

見つけられなかったので、割愛

デモ

そのうち追加します

今年の私の推しの紹介でした。
明日は @tamako-info さんの Panda CSSとの付き合いを小説風に語るです。
お楽しみに！