頭脳一式 
擬似クラス「:nth-child」を使うと、同一階層のすべての要素の中からn番目の要素に対してスタイルを適用することができるようになります。
奇数の要素にスタイルを適用する
奇数の要素にスタイルを適用するには:nth-child(odd)と記述します。
See the Pen
nth-child-odd by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(odd){
background-color:red;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(odd){
background-color:red;
}
偶数の要素にスタイルを適用する
偶数の要素にスタイルを適用するには:nth-child(even)と記述します。
See the Pen
BajXbVP by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(even){
background-color:yellow;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(even){
background-color:yellow;
}
n番目の要素にスタイルを適用する
例えば、5番目の要素にスタイルを適用するには:nth-child(5)と記述します。
See the Pen
yLemwZB by shiakisudev (@shiakisu)
on CodePen.
li:nth-child(5){
background-color:pink;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(5){
background-color:pink;
}
n番目以外の要素にスタイルを適用する
例えば、5番目以外の要素にスタイルを適用するには:not(:nth-child(5))と記述します。
See the Pen
GRoVLpY by shiakisudev (@shiakisu)
on CodePen.
li:not(:nth-child(5)){
background-color:pink;
}
または以下のように記述することもできます。
CSS
ul > :not(:nth-child(5)){
background-color:pink;
}
nの倍数の要素にスタイルを適用する
例えば3の倍数の要素（3番目の要素、6番目の要素、9番目の要素）にスタイルを適用するにはnth-child(3n)と記述します。
See the Pen
nth-child-n by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(3n){
background-color:green;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(3n){
background-color:green;
}
nの倍数+1番目の要素にスタイルを適用する
例えば3の倍数の次の要素（1番目、4番目の要素、7番目の要素、10番目の要素）にスタイルを適用するには:nth-child(3n+1)と記述します。
See the Pen
nth-child-n+1 by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(3n+1){
background-color:blue;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(3n+1){
background-color:blue;
}
nの倍数-1番目の要素にスタイルを適用する
例えば3の倍数の前の要素（2番目の要素、5番目の要素、8番目の要素）にスタイルを適用するには:nth-child(3n-1)と記述します。
See the Pen
nth-child-n-1 by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(3n-1){
background-color:aqua;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(3n-1){
background-color:aqua;
}
n番目以降の要素にスタイルを適用する
例えば、5番目以降の要素にスタイルを適用するには:nth-child(n+5)と記述します。
See the Pen
jOWgJRj by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(n+5){
background-color:lime;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(n+5){
background-color:lime;
}
n番目までの要素にスタイルを適用する
例えば、1番目～5番目までの要素にスタイルを適用するには:nth-child(-n+5)と記述します。
See the Pen
nth-child–n+i by shiakisudev (@shiakisu)
on CodePen.
CSS
li:nth-child(-n+5){
background-color:fuchsia;
}
または以下のように記述することもできます。
CSS
ul > :nth-child(-n+5){
background-color:fuchsia;
}
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！
