素材の壺

偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス「nth-child(n)」の使い方をまとめてみました。

HTMLの例

1番目
2番目
3番目
4番目
5番目

上からn番目

上から2番目のみに適用。

li:nth-child(2){
color: #f00;
}

奇数

奇数要素のみに適用。

li:nth-child(odd){
color: #f00;
}

偶数

偶数要素のみに適用。

li:nth-child(even){
color: #f00;
}

nの倍数

nの倍数にのみ適用。以下だと3、6、9、12…と3の倍数に適用できる。

li:nth-child(3n){
color: #f00;
}

以下の書き方だと3の倍数に1を足した、1、4、7、10、13…に適用できる。

li:nth-child(3n+1){
color: #f00;
}

上からn個

上から指定した個数だけ適用。この例だと上から3個に適用されます。

li:nth-child(-n+3){
color: #f00;
}

上からn個目以降

上から指定した個数以降にのみ適用。この例だと上から3個目以降に適用されます。

li:nth-child(n+3){
color: #f00;
}

ここからは「nth-child()」以外の書き方。

最初の要素のみ

最初の要素にのみ適用。

li:first-child{
color: #f00;
}

最後の要素のみ

最後の要素にのみ適用。

li:last-child{
color: #f00;
}

下からn番目

下からn番目の要素にのみ適用。

li:nth-last-child(3){
color: #f00;
}

下からn個

下から指定した個数だけ適用。この例だと下から3個に適用されます。

li:nth-last-child(-n+3){
color: #f00;
}

下からn個目以降

下から指定した個数以降にのみ適用。この例だと下から3個目以降に適用されます。

li:nth-last-child(n+3){
color: #f00;
}

以上、指定した要素にだけCSSを適用するための疑似クラスのご紹介でした。