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