⌘K

疑似クラス nth-last-child

疑似クラス nth-last-childは、 親要素の末尾から数えてn番目の子要素を 選択します。振る舞いはnth-childと 同様ですが、カウントが末尾から行われる点が異なります。

構文

cssセレクター:nth-last-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-last-child(4) {
  color: red;
}

Результат:

例

次に、末尾から数えてすべての偶数番目の liを赤色にします： 

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
cssli:nth-last-child(even) {
  color: red;
}

Результат:

例

次に、末尾から数べてすべての奇数番目の liを赤色にします： 

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
cssli:nth-last-child(odd) {
  color: red;
}

Результат:

例

次に、末尾から数えて3つおきの liを赤色にします： 

html<ul>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
  <li>リストアイテム</li>
</ul>
cssli:nth-last-child(3n) {
  color: red;
}

Результат:

Back疑似クラス nth-childNext疑似クラス only-child