HTML

コピペで簡単 CSS で偶数、奇数、最初、最後、前から後ろからn番目の要素にスタイルを適用させる方法

コピペで簡単 CSS で偶数、奇数、最初、最後、前から後ろからn番目の要素にスタイルを適用させる方法を紹介します。
例えば、li タグの最初の要素にスタイルを適用させたい場合に便利な方法です。

  1. 偶数の要素にスタイルを適用
  2. 奇数の要素にスタイルを適用
  3. 最初の要素にスタイルを適用
  4. 最後の要素にスタイルを適用
  5. 前から数えてn番目の要素にスタイルを適用
    1. 前から数えてnの倍数の要素にスタイルを適用
    2. 前から数えてn番目の要素からnの倍数の要素にスタイルを適用

今回紹介する方法の、共通したベースの HTML は次の通りです。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

偶数の要素にスタイルを適用

前から数えて偶数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-child(even) を使用します。
例えば、前から数えて偶数の要素の背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(even){
background-color: #333333;
}

後ろから数えて偶数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-last-child(even) を使用します。
例えば、後ろから数えて偶数の要素の背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(even){
background-color: #333333;
}

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

前から数えて奇数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-child(odd) を使用します。
例えば、前から数えて奇数の要素の背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(odd){
background-color: #333333;
}

後ろから数えて奇数の要素にスタイルを適用する場合は CSS の疑似クラス :nth-last-child(odd) を使用します。
例えば、後ろから数えて奇数の要素の背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(odd){
background-color: #333333;
}

最初の要素にスタイルを適用

最初の要素にスタイルを適用する場合は CSS の疑似クラス :first-child を使用します。
例えば、最初のリストの背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
li:first-child {
background-color: #333333;
}

最後の要素にスタイルを適用

最後の要素にスタイルを適用する場合は CSS の疑似クラス :last-child を使用します。
例えば、最後のリストの背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
li:last-child {
background-color: #333333;
}

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

前から数えてn番目の要素にスタイルを適用する場合は CSS の疑似クラス :nth-child(3) を使用します。
例えば、前から数えて3番目のリストの背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(3){
background-color: #333333;
}

後ろから数えてn番目の要素にスタイルを適用する場合は CSS の疑似クラス :nth-last-child(3) を使用します。
例えば、後ろから数えて3番目のリストの背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(3){
background-color: #333333;
}

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-child(3n){
background-color: #333333;
}

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(3n){
background-color: #333333;
}

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

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

  • 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の倍数の要素の背景色を変更する場合は、対象の項目に次のコードを追加します。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
li:nth-last-child(3n+2){
background-color: #333333;
}

まとめ

コピペで簡単 CSS で偶数、奇数、最初、最後、前から後ろからn番目の要素にスタイルを適用させる方法を紹介しました。

合わせて読みたい関連記事