コピペで簡単 CSS 偶数・奇数・倍数の時にスタイルを適用する方法

CSS で偶数・奇数・倍数の時にスタイルを適用する方法を紹介します。

  1. 最初の要素にスタイルを適用する方法
  2. 最後の要素にスタイルを適用する方法
  3. 偶数の要素にスタイルを適用する方法
  4. 奇数の要素にスタイルを適用する方法
  5. N番目の要素にスタイルを適用する方法
  6. Nの倍数の要素にスタイルを適用する方法

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

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

最初の要素にスタイルを適用する方法

  • 1
  • 2
  • 3
  • 4
  • 5

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

li:first-child {
background-color: #333333;
}

最後の要素にスタイルを適用する方法

  • 1
  • 2
  • 3
  • 4
  • 5

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

li:last-child {
background-color: #333333;
}

偶数の要素にスタイルを適用する方法

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

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

li:nth-child(even) {
background-color: #333333;
}

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

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

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

li:nth-child(odd) {
background-color: #333333;
}

N番目の要素にスタイルを適用する方法

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

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

li:nth-child(3) {
background-color: #333333;
}

数字を変更する場合は :nth-child(3)3 の数字を変更してください。

Nの倍数の要素にスタイルを適用する方法

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

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

li:nth-child(3n) {
background-color: #333333;
}

数字を変更する場合は :nth-child(3n)3 の数字を変更してください。

まとめ

CSS で偶数・奇数・倍数の時にスタイルを適用する方法を紹介しました。

スポンサーリンク

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