この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。





:nth-child と :nth-of-type を完璧に使い分けれるのは、なかなか難しいですが、どんどん理解していくことで、CSSのプロに一歩近づけると思います。
今回、:nth-child を使って、何個か例をあげて説明して行こうと思います。



5個目だけのエレメントだけをセレクトする場合

001 :nth childの使い方

li:nth-child(5) {
	color:green;
}

かっこ内に特定の数字を入れることで、上の例で言うと5個目だのliを指定して、スタイルを当てれます。




5個目以降だけのエレメントだけをセレクトする場合

002 :nth childの使い方

li:nth-child(n+6) {
	color:green;
}

これでもし li が10個以上あったら、それらもすべて指定することになります。n は、0 から始まることを覚えといてください。



最初の5個だけのエレメントだけをセレクトする場合

003 :nth childの使い方

li:nth-child(-n+5) {
	color:green;
}

n が 0 から始まって -1, -2, -3 となっていきますので、 5 番目より低いエレメントが選択できます。



1個目から始まって、4個ずつ飛ばして選択する場合

004 :nth childの使い方

li:nth-child(4n+1) {
	color:green;
}




奇数を選択する場合

005 :nth childの使い方

li:nth-child(odd) {  //もしくは 2n+1
	color:green;
}




偶数選択する場合

006 :nth childの使い方

li:nth-child(even) { //もしくは 2n
	color:green;
}




最後のエレメントを選択する場合

007 :nth childの使い方

li:last-child { 
	color:green;
}

10個のエレメントがあれば10個目を、100個あれば100個目を選択します。



最後から2個目のエレメントを選択する場合

008 :nth childの使い方

li:nth-last-child(2) { 
	color:green;
}

nth に last を入れることで、最後から何個目かを選択することができます。もちろん 2n などを使うことで、後ろからの偶数でもOKです。



対応しているブラウザー

面白いことに :first-child は、インターネットエクスプロラー7(IE7) より対応していましたが、 それ以外のセレクターは IE9 になってからしか対応してません。
それ以外のブラウザーに関しては、特に心配することなく使えると思います。IEの対応が心配な方は、Selectivizrなどを使って補助もできます。