:nth-childの使い方

:nth-child()を色々試してみたいと思います。

対応ブラウザ

:nth-child()が対応しているブラウザはこちら。
IE8以下では対応していないようです。

X番目の要素を指定

5番目だけ違う背景色を指定してみます。

HTML

<ul id="list">
	<li>01番目のリスト</li>
	<li>02番目のリスト</li>
	<li>03番目のリスト</li>
	<li>04番目のリスト</li>
	<li>05番目のリスト</li>
	<li>06番目のリスト</li>
	<li>07番目のリスト</li>
	<li>08番目のリスト</li>
	<li>09番目のリスト</li>
	<li>10番目のリスト</li>
	<li>11番目のリスト</li>
	<li>12番目のリスト</li>
	<li>13番目のリスト</li>
</ul>

CSS

#list li {
	background: #3498DB;
}
#list li:nth-child(5) {
	background: #E74C3C;
}

X番目指定のデモページ
　

偶数行、奇数行の指定

偶数行だけ違う背景色を指定してみます。

CSS

#list li {
	background: #3498DB;
}
#list li:nth-child(even) {
	background: #E74C3C;
}

:nth-child(even)で偶数行、:nth-child(odd)で奇数行の指定になります。
偶数行、奇数行指定のデモページ
　

nを使った指定

:nth-child()の()内はnを使って指定できます。
nを使って偶数行を指定してみます。

CSS

#list li {
	background: #3498DB;
}
#list li:nth-child(2n) {
	background: #E74C3C;
}

2nで2の倍数が指定できます。
nを使った指定のデモページ1
　

4列に並んでいるレイアウトの右端を指定してみます。

CSS

#list li {
	background: #3498DB;
}
#list li:nth-child(4n) {
	background: #E74C3C;
}

4列の右端は4の倍数なので、4nで指定できます。
nを使った指定のデモページ2
　

4列に並んでいるレイアウトの左端を指定してみます。

CSS

#list li {
	background: #3498DB;
}
#list li:nth-child(4n + 1) {
	background: #E74C3C;
}

4列の左端は4の倍数に1をプラスしたものなので、4n + 1で指定できます。
nを使った指定のデモページ3
　

【参考サイト】

• :nth-child()疑似クラス (E:nth-child(n))｜セレクタ｜CSS HappyLife ZERO