擬似クラス「:nth-child」の使い方

擬似クラス「: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;
}