今年、マークアップ系の推しに:has()、:user-invalid、fieldsetタグ、:nth-child(X of S)が増えたので紹介したい

この記事は[インフォ・ラウンジAdvent Calendar 2023](https://qiita.com/advent-calendar/2023/info-lounge) 6日目の記事です

前回は @sakzw くんの[Zoomミーティングに参加中であるか判定する（Windows）](https://qiita.com/sakzw/items/bf4f837bc6596f096e9f)でした。
そんなことができるんだ？！とびっくりでした。
しかし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()

## デモ
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="oNmJzxw" data-user="ituki_b" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ituki_b/pen/oNmJzxw">
  :has()の実例</a> by ituki_b (<a href="https://codepen.io/ituki_b">@ituki_b</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# ２）: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

## デモ
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdvxgNX" data-user="ituki_b" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ituki_b/pen/mdvxgNX">
  :user-invalidテスト</a> by ituki_b (<a href="https://codepen.io/ituki_b">@ituki_b</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

## デモ
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdvxgNX" data-user="ituki_b" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ituki_b/pen/mdvxgNX">
  :user-invalidテスト</a> by ituki_b (<a href="https://codepen.io/ituki_b">@ituki_b</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

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

## Can I use
見つけられなかったので、割愛

## デモ
そのうち追加します

---

今年の私の推しの紹介でした。
明日は @tamako-info さんの [Panda CSSとの付き合いを小説風に語る](https://qiita.com/tamako-info/items/fe643f79d1f33a1e5070) です。
お楽しみに！