モダンなセレクタ：:has、:is、:where、高度な:nth-child

最近の機能的擬似クラスを活用して、コンテンツに基づいて選択し、詳細度を膨らませずにセレクタをグループ化し、複雑なパターンをターゲットにしましょう。

9 分 · 3 問

:is()と:where()はどちらもセレクタをグループ化しますが、1つの決定的な点で分かれます。詳細度です。:is(nav, .menu, #main a)は、たとえマッチするのがnavであっても、最も強い引数（ここではID）の詳細度を取ります。:where()は引数が何であれ詳細度がゼロです。実用的な帰結として、:where()はリセットやデザインシステムのデフォルトスタイルにとって理想的なツールであり、その後どんな単純なクラスセレクタでも苦もなく上書きできます。

:where(h1, h2, h3, h4) {
  margin-block: 0;
  line-height: 1.2;
}

:is(article, aside, section) :is(h2, h3) {
  font-family: var(--font-heading);
}

.prose :is(ul, ol) li + li {
  margin-top: 0.5em;
}

:has()はついに読む方向を逆転させます。セレクタが対象とするのは、内部に含むものではなくホスト要素です。.card:has(> img)は、画像を直接の子として持つカードを選択します。状態擬似クラスと組み合わせると、JavaScriptなしで情報を上方向へ流せます。フィールドが無効なときにそのラベルをスタイリングしたり、フィールドがフォーカスを持つときにフォームを、チェックボックスがチェックされているときにテーブルの行をスタイリングしたりできます。

.field:has(input:invalid:not(:focus)) label {
  color: #dc2626;
}

.card:has(> img) {
  padding-top: 0;
}

tr:has(input[type="checkbox"]:checked) {
  background: #eef2ff;
}

:nth-child()については、固めておくべきスキルが2つあります。まず、An+Bの式を読むこと。2n（偶数）、2n+1（奇数）、-n+3（最初の3つ）、n+4（4番目から最後まで）。「2番目から5番目まで」の範囲は:nth-child(n+2):nth-child(-n+5)を組み合わせて書きます。次に、より新しいof S構文。:nth-child(2n of .visible)は.visibleにマッチする子の中だけで数えるのに対し、.visible:nth-child(2n)はすべての子を数えてからフィルタします。他の要素が間に挟まった途端、この2つはまったく異なる結果になります。

tr:nth-child(odd) {
  background: #fafafa;
}

li:nth-child(-n + 3) {
  font-weight: 600;
}

li:nth-child(n + 2):nth-child(-n + 5) {
  border-top: 1px solid #e5e7eb;
}

.row:nth-child(2n of .visible) {
  background: #eef2ff;
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. :where(#main, .nav, a)の詳細度は何ですか？
   • IDのもの、つまり(1,0,0)
   • 3つの引数の合計
   • 引数が何であれゼロ
   • 実際にマッチした引数のもの
2. .card:has(> img)は何を選択しますか？
   • カードの直接の子である画像
   • 画像を直接の子として含むカード
   • DOM上で画像の後にあるカード
   • カードの子孫であるすべての画像
3. 一部のli要素だけが.visibleを持つリストで、li:nth-child(2n of .visible)は何をしますか？
   • .visibleクラスも持つ、リストの偶数番目のli要素をターゲットにする
   • li.visible要素だけを数えて、1つおきのliをターゲットにする
   • 偶数番目のli要素をターゲットにし、それらに.visibleクラスを追加する