この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。
:nth-child と :nth-of-type を完璧に使い分けれるのは、なかなか難しいですが、どんどん理解していくことで、CSSのプロに一歩近づけると思います。
今回、:nth-child を使って、何個か例をあげて説明して行こうと思います。
５個目だけのエレメントだけをセレクトする場合
li:nth-child(5) {
color:green;
}
かっこ内に特定の数字を入れることで、上の例で言うと５個目だのliを指定して、スタイルを当てれます。
５個目以降だけのエレメントだけをセレクトする場合
li:nth-child(n+6) {
color:green;
}
これでもし li が１０個以上あったら、それらもすべて指定することになります。n は、0 から始まることを覚えといてください。
最初の５個だけのエレメントだけをセレクトする場合
li:nth-child(-n+5) {
color:green;
}
n が 0 から始まって -1, -2, -3 となっていきますので、 5 番目より低いエレメントが選択できます。
１個目から始まって、４個ずつ飛ばして選択する場合
li:nth-child(4n+1) {
color:green;
}
奇数を選択する場合
li:nth-child(odd) { //もしくは 2n+1
color:green;
}
偶数選択する場合
li:nth-child(even) { //もしくは 2n
color:green;
}
最後のエレメントを選択する場合
li:last-child {
color:green;
}
１０個のエレメントがあれば１０個目を、１００個あれば１００個目を選択します。
最後から２個目のエレメントを選択する場合
li:nth-last-child(2) {
color:green;
}
nth に last を入れることで、最後から何個目かを選択することができます。もちろん 2n などを使うことで、後ろからの偶数でもOKです。
対応しているブラウザー
面白いことに :first-child は、インターネットエクスプロラー7(IE7) より対応していましたが、 それ以外のセレクターは IE9 になってからしか対応してません。
それ以外のブラウザーに関しては、特に心配することなく使えると思います。IEの対応が心配な方は、Selectivizrなどを使って補助もできます。
