疑似クラス nth-child

疑似クラス nth-child は、親の n 番目の子要素である要素を選択します。

構文

cssセレクタ:nth-child(数値 | odd | even | 式) {
  
}

値

値	説明
数値	`1` から始まる正の数。対象とする要素の番号を指定します。要素の番号は `1` から始まります。
`odd`	奇数の要素。
`even`	偶数の要素。
式	文字 n を使用した特別な式を組むことができます。この n は、0（1ではなく）から無限大までのすべての整数を表します。つまり、`2n` はすべての偶数（2番目から始まる）を意味します。どのように理解するか？ `n` に `0` から順に数値を代入します： n = 0 の場合、2n は 0 になります - そのような要素はありません（要素の番号付けは1から）。 n = 1 の場合、2n は 2 になります - 2番目の要素。 n = 2 の場合、2n は 4 になります - 4番目の要素。 3n と書くと、それは3番目から始まる3つごとの要素になります。以下同様です。

例

この例では、親の 4 番目の子要素である li を赤色にします：

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

例

今度は、すべての偶数番目の li を赤色にします：

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

例

今度は、すべての奇数番目の li を赤色にします：

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

例

今度は、3番目から始まる3つごとの li を赤色にします：

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

例

セレクタでは要素の範囲を指定できます。例えば、20 個の要素からなるリストがあり、 7 から 14 までの要素を選択したいとします。これは次のように行えます：

html<ol>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: