:nth-childの使い方

:nth-childの指定パターンをいくつか試してみます。

サンプル実行前

:nth-childで指定する前の状態です。
:nth-childで指定した要素に背景色を付けるようにしてみます。

HTML

<div class="list">
	<div class="list-item">1番目</div>
	<div class="list-item">2番目</div>
	<div class="list-item">3番目</div>
	<div class="list-item">4番目</div>
	<div class="list-item">5番目</div>
	<div class="list-item">6番目</div>
	<div class="list-item">7番目</div>
	<div class="list-item">8番目</div>
	<div class="list-item">9番目</div>
	<div class="list-item">10番目</div>
</div>

CSS

.list {
	width: 800px;
	margin: 0 auto;
}
.list-item {
	float: left;
	width: 180px;
	margin: 10px;
	background: #cccccc;
}

サンプル実行前のデモページ
　

位置を1つだけ指定する

位置を1つだけ指定する場合、カッコ内に数値を記述します。

CSS

.list-item:nth-child(4) {
	background: #E74C3C;
}

位置を1つだけ指定するデモページ
　

偶数・奇数番目を指定する

偶数・奇数を指定する場合、evenやoddを指定する方法と、nを使った指定方法があります。
カッコ内にevenを記述することで、偶数番目の指定になります。

CSS

.list-item:nth-child(even) {
	background: #E74C3C;
}

偶数のデモページ
　

oddで奇数番目の指定になります。

CSS

.list-item:nth-child(odd) {
	background: #E74C3C;
}

奇数のデモページ
　

nを使った数式でも記述できます。
偶数番目の場合は2nと指定します。

CSS

.list-item:nth-child(2n) {
	background: #E74C3C;
}

nは0から始まるので注意ください。
偶数のデモページ2
　

奇数番目の場合は2n + 1と指定します。

CSS

.list-item:nth-child(2n + 1) {
	background: #E74C3C;
}

奇数のデモページ2
　

特定の列を指定する

floatで配置している列の右端を指定する場合、今回のサンプルは4列なので4nと指定します。

CSS

.list-item:nth-child(4n) {
	background: #E74C3C;
}

右端のデモページ
　

左端を指定する場合、4n + 1で指定できます。

CSS

.list-item:nth-child(4n + 1) {
	background: #E74C3C;
}

左端のデモページ
同様に、左端から2番目の場合は4n + 2で指定できます。
　

2行目以降を指定する

4列表示の2行目以降なので、n + 5で5番目以降を指定します。

CSS

.list-item:nth-child(n + 5) {
	background: #E74C3C;
}

2行目以降のデモページ
　

1行目のみを指定する

先頭から何番目までかを指定したい場合、nにマイナスをかけて負の値にして、表示したい範囲の数値を足すようにします。

CSS

.list-item:nth-child(-n + 4) {
	background: #E74C3C;
}

1行目のみのデモページ
　

奇数行を指定する

奇数行を指定したい場合、2行分をひとつのセットとして考えます。
今回のサンプルの場合、4列なので8nとして、1～4を足すようにします。

CSS

.list-item:nth-child(8n + 1), 
.list-item:nth-child(8n + 2), 
.list-item:nth-child(8n + 3), 
.list-item:nth-child(8n + 4) {
	background: #E74C3C;
}

奇数行を指定するのデモページ
偶数行を指定したい場合は5～8を足すようにすればOKです。
　

【参考サイト】

• CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い｜Webpark
• :nth-childの使い方 | CSSPRO