読者です 読者をやめる 読者になる 読者になる

TOKYOからOKINAWAに移住したHOMME

20代後半で思い立ったように東京から沖縄に移住したヤローの徒然+プログラム関連作業用メモ

作業用メモ:CSS :nth-childの使い方

作業用メモ

 


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


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

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

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

 

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

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

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

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

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

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

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

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;
}

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

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

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

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

 

対応しているブラウザー

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