CSS で何番目の要素を指定する方法

最終更新日 - 公開日 2019.08.14

by Takumi Hirashima

CSS で何番目の要素を指定する方法を紹介します。
例えば、前から後ろから何番目の要素の見た目を変えたい時などに便利な方法です。

  1. 前から数えてn番目の要素にスタイルを適用
    1. 前から数えてnの倍数の要素にスタイルを適用
    2. 前から数えてn番目の要素からnの倍数の要素にスタイルを適用

説明に使用するベースの HTML は次の通りです。
ここでは、ul タグに含まれる li タグを対象に説明します。

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>

前から数えてn番目の要素にスタイルを適用

前から数えてn番目の要素にスタイルを適用する場合は、CSS の疑似クラス :nth-child() を使用します。
例えば、前から数えて3番目の要素を変更する場合は、対象の要素（例の場合 li タグ）に値「3」を加えた擬似要素 :nth-child(3) を追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(3){

  background-color: #333333;

}

後ろから数えてn番目の要素にスタイルを適用する場合は、CSS の疑似クラス :nth-last-child() を使用します。
例えば、後ろから数えて3番目の要素を変更する場合は、対象の要素に値「3」を加えた擬似要素 :nth-last-child(3) を追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(3){

  background-color: #333333;

}

前から数えてnの倍数の要素にスタイルを適用

前から数えてnの倍数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-child() を使用します。
例えば、3の倍数のリストの背景色を変更する場合は、対象のセレクタ（li）に擬似要素 :nth-child(3n) を追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(3n){

  background-color: #333333;

}

後ろから数えてnの倍数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-last-child(3n) を使用します。
例えば、3の倍数のリストの背景色を変更する場合は、対象のセレクタ（li）に擬似要素 :nth-last-child(3n) を追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(3n){

  background-color: #333333;

}

前から数えてn番目の要素からnの倍数の要素にスタイルを適用

前から数えてn番目の要素からnの倍数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-child() を使用します。
例えば、前から数えて2番目の要素から3の倍数の要素の背景色を変更する場合は、対象のセレクタ（li）に擬似要素 :nth-child(3n+2) を追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(3n+2){

  background-color: #333333;

}

後ろから数えてn番目の要素からnの倍数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-last-child(3n+2) を使用します。
例えば、後ろから数えて2番目の要素から3の倍数の要素の背景色を変更する場合は、対象のセレクタ（li）に擬似要素 :nth-last-child(3n+2) を追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(3n+2){

  background-color: #333333;

}

まとめ

CSS で偶数や奇数、最初や最後、n番目の要素にスタイルを適用させる方法を紹介しました。