【css】これは便利!奇数、偶数、等間隔など~番目を指定する方法「:nth-child()」と「:nth-last-child」

css

要素が複数並んでいる状態で、数個を置きにstyleを変更する場合など、皆さんはどんな方法を使っていますか?
もし、その都度classを追加する方法を取られているなら、是非この記事をご一読ください。今回は、classを使わずcssのみで奇数、偶数、等間隔などを指定する方法をご紹介します。
設定方法は簡単ですし、その上ソースに無駄なclassを追加する必要がなくなるので一石二鳥です。

偶数・奇数にスタイルを適用する

偶数の背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

偶数を指定する書き方として:nth-child(even)を使った書き方もあります。
上記と全く同じことを数式で表現したcssが:nth-child(2n)(2の倍数)になります。

奇数の背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

奇数を指定する書き方として:nth-child(odd)を使った書き方もあります。
上記と全く同じことを数式で表現したcssが:nth-child(2n+1)(2の倍数の1番目)になります。

〇〇番目にスタイルを適用

前から3番目の背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

前から3番目を数式で表現するcssは:nth-child(3)になります。

後ろから3番目の背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

後ろからの場合は:nth-childでなく:nth-last-childを使います。
後ろから3番目を数式で表現するcssは:nth-last-child(3)になります。

〇〇以降、〇〇以前にスタイルを適用

前から3番目までの背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

前から3番目までを数式で表現するcssは:nth-child(-n+3)になります。

前から4番目以降の背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

前から4番目以降を数式で表現するcssは:nth-child(n+4)になります。

後から3番目以降の背景色を赤で表示

html

css

結果

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

前から3番目までを数式で表現するcssは:nth-last-child(-n+3)になります。

:nth-child()と:nth-last-childの使い方まとめ

:nth-child(3n)3の倍数
:nth-child(3n+1)3の倍数の1番目
:nth-child(3)前から3番目
:nth-last-child(3)後ろから3番目を数式で表現する
:nth-child(-n+3)前から3番目まで
:nth-child(n+4)前から4番目以降を
:nth-last-child(-n+3)後から3番目まで