疑似クラス nth-last-child

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

構文

セレクター: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を赤色にします：

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

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

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

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

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

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

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

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

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

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

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