この記事はインフォ・ラウンジAdvent Calendar 2023 6日目の記事です
前回は @sakzw くんのZoomミーティングに参加中であるか判定する（Windows）でした。
そんなことができるんだ？！とびっくりでした。
しかしMacユーザなので使えないのでした・・・
さて、10年ほどマークアップをしてきて、年々増える便利な要素や擬似要素、擬似クラスに驚いていますが、
今年は3つ推しが増えたので、紹介したいと思います。
１）: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との付き合いを小説風に語る です。
お楽しみに！