【8/31まで 今季最大のセール開催中!】Udemyの人気コースが今なら1,200円から!!

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

【CSS3】疑似クラス「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;
}

以上で記事の解説はお終い!

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ!同僚に差をつけよう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です