もっとモダンにcssを書いてみよう（where, is, has）

最近ではtailwindなどのcssフレームワークを使うことが多いのでcssを直書きする場面がどんどん減ってきています。

しかし、それでもUIライブラリーの中身を修正したりする時にはcssを書く必要が出てきますよね。
ということで、今回はもう少しモダンな書き方を３つ見ていきます！

:where()

:where()は複数のセレクタをまとめるための擬似クラスで、詳細度に影響を与えません。
詳細度は他のcssよりどれだけ優先されるかを表すものです。以下の記事に詳しく書いてました！

main h1, main h2, main h3 {
  color: #ffffff;
}

main :where(h1, h2, h3) {
  color: #ffffff;
}

:is()

:is()も複数のセレクタをまとめます。しかし、:where()と違ってグループ内の最も詳細度の高いセレクタの詳細度を継承します。もっと優先させることができると思っていただければ！

main h1, main h2, main h3 {
  color: #ffffff;
}

main :is(h1, h2, h3) {
  color: #ffffff;
}

:has()

:has()は「〜を持つ要素」を選択する親セレクタです。JavaScriptでの判定がなくても子要素の状態に基づいて親要素を選択できます。

.parent.checked {
  background: lightgreen;
}

.parent:has(input:checked) {
  background: lightgreen;
}

おわりに

こういう豆知識的なものが集まって生産性がどんどん上がっていくのでもっと勉強していきたいですね。