順番(n番目)による指定

  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
<ul>
	<li>1番目の項目です</li>
	<li>2番目の項目です</li>
	<li>3番目の項目です</li>
	<li>4番目の項目です</li>
	<li>5番目の項目です</li>
	<li>6番目の項目です</li>
</ul>
ul li:nth-child(1) {
	color: red;
}
ul li:nth-child(2) {
	color: fuchsia;
}
ul li:nth-child(3) {
	color: purple;
}
ul li:nth-child(4) {
	color: green;
}
ul li:nth-child(5) {
	color: lime;
}
ul li:nth-child(6) {
	color: blue;
}
一番基本的な使い方は、要素の並び順を数字で指定する方法です。:nth-child(n)のように、参照したい要素の順番を数字で指定するだけでOKです。
要素を数える場合は「1からスタート」となります。

キーワードによる指定

  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
同上
/* 奇数 */
ul li:nth-child(odd) {
	color: red;
}
/* 偶数 */
ul li:nth-child(even) {
	color: blue;
}
「奇数」と「偶数」はキーワードを利用して指定することが可能です。

倍数指定(Xn)

(2の倍数の要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です

(3の倍数の要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です
同上
/* 2の倍数の要素を指定 */
ul li:nth-child(2n) {
	color: red;
}
/* 3の倍数の要素を指定 */
ul li:nth-child(3n) {
	color: red;
}
指定方法は「順番による指定」とほぼ同じですが、「n」キーワードとセットにすることで、式(乗算)の結果をもとに要素を指定することができます。

倍数指定(Xn)- 2

  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です
同上
/* 奇数の要素を指定 */
ul li:nth-child(2n + 1) {
	color: red;
}
指定できる演算式は乗算だけに限らず、四則演算なら利用可能です。
「奇数」の指定は演算式によって指定することも可能です。

n番目まで(-n + Y)、n番目以降(n + Y)

(先頭から3つ目までの要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です

(先頭から4つ目以降の要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です
同上
/* 先頭から3つ目までの要素を指定 */
ul li:nth-child(-n + 3) {
	color: blue;
}
/* 先頭から4つ目以降の要素を指定 */
ul li:nth-child(n + 4) {
	color: green;
}
「n」に0以上の数字を代入していって、結果が正になる範囲が選択されます。

n番目まで(-n + Y)、n番目以降(n + Y)- 応用

(3つ目から5つ目までの要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です
同上
/* 3つ目から5つ目までの要素を指定 */
#box06 ul li:nth-child(n + 3):nth-child(-n + 5) {
	color: red;
}
2つの条件の組み合わせから「3つ目から5つ目までの要素を指定」という結果になります。

一番最後の要素を指定

  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です
同上
/* 一番最後の要素を指定 */
ul li:nth-last-child(1) {
	color: purple;
}
:nth-child()擬似クラスで指定できないパターンの1つ目は最後の要素ですが、:nth-last-child()擬似クラスでは簡単に取得可能です。
「後ろからn番目」としたければ、擬似クラスで指定する数値を変更すれば任意に変更可能です。

後ろからn番目まで(-n + Y)

(後ろから3つ目までの要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です

(後ろから4つ目以前の要素を指定)
  • 1番目の項目です
  • 2番目の項目です
  • 3番目の項目です
  • 4番目の項目です
  • 5番目の項目です
  • 6番目の項目です
  • 7番目の項目です
同上
/* 後ろから3つ目までの要素を指定 */
#box08 ul li:nth-last-child(-n + 3) {
	color: purple;
}
/* 後ろから4つ目以前の要素を指定 */
#box08 ul.ul2 li:nth-last-child(n + 4) {
	color: red;
}
もう1つのパターンは後ろから範囲を指定した要素の選択です。
指定方法、考え方は:nth-child()擬似クラスの時の「先頭からn番目まで」と同じです。