Udemyの人気コースが今なら80%OFF!

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

【CSS3】疑似クラス「nth-child」の使い方

疑似クラス「:nth-child」を使うと、特定の要素に対してスタイルを適用することができるようになります。

奇数の要素にスタイルを適用する

奇数の要素にスタイルを適用するには:nth-child(odd)と記述します。

See the Pen
nth-child-odd
by shiakisudev (@shiakisu)
on CodePen.

CSS

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

n番目の要素にスタイルを適用する

例えば、5番目の要素にスタイルを適用するには:nth-child(5)と記述します。

See the Pen
yLemwZB
by shiakisudev (@shiakisu)
on CodePen.

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

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

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

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

n番目以降の要素にスタイルを適用する

例えば、5番目以降の要素にスタイルを適用するには:nth-child(n+5)と記述します。

See the Pen
jOWgJRj
by shiakisudev (@shiakisu)
on CodePen.

CSS

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

コメントを残す

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