リストや表を交互に色付け！偶数・奇数をCSSで簡単に操作

ウェブデザインでは、リストや表の背景色を交互に設定することで、見やすく整理されたデザインを作ることがよくあります。今回は、CSSの擬似クラスを活用して、偶数や奇数の要素に自動的にスタイルを適用する方法を解説します。この方法を使えば、HTMLに無駄なクラスを追加する必要がなく、シンプルで効率的なコーディングが可能です。

偶数・奇数を指定してスタイルを適用

CSSの擬似クラス nth-child(odd) を使用すると、奇数番目の要素にスタイルを適用できます。

HTMLコード

<ul class="list-odd">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSSコード

.list-odd li:nth-child(odd) {
    background-color: #C5FAD2; /* 背景色を設定 */
}

結果

• 1
• 2
• 3
• 4
• 5
• 6

1, 3, 5 の奇数番目のリストアイテムに背景色が適用されます。

偶数の個所にスタイルを適用

偶数番目の要素には、擬似クラス nth-child(even) を使用します。

HTMLコード

<ul class="list-even">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSSコード

.list-even li:nth-child(even) {
    background-color: #C5FAD2; /* 背景色を設定 */
}

結果

• 1
• 2
• 3
• 4
• 5
• 6

2, 4, 6 の偶数番目のリストアイテムに背景色が適用されます。

特定の位置にスタイルを適用

nth-child(番号) を使用すると、リストの上から特定の位置にスタイルを適用できます。

HTMLコード

<ul class="list-specific">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSSコード

.list-specific li:nth-child(3) {
    background-color: #C5FAD2; /* 3番目の要素にスタイルを適用 */
}

結果

• 1
• 2
• 3
• 4
• 5

リストの3番目の項目だけに背景色が適用されます。

下から特定の位置を指定する

nth-last-child(番号) を使うと、リストの下から特定の位置にスタイルを適用できます。

HTMLコード

<ul class="list-bottom">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSSコード

.list-bottom li:nth-last-child(2) {
    background-color: #C5FAD2; /* 下から2番目の要素にスタイルを適用 */
}

結果

• 1
• 2
• 3
• 4
• 5

下から2番目のリストアイテム（4番目の要素）に背景色が適用されます。

まとめ

CSSの擬似クラス nth-child や nth-last-child を使用すれば、リストや表のデザインを簡単に調整できます。奇数・偶数の背景色を交互に設定したり、特定の位置にだけスタイルを適用したりする際に便利です。この方法を活用して、クリーンで見やすいデザインを作成しましょう！