HTML 要素に対して奇数回目と偶数回目で異なるスタイルを適用する方法

2024-09-13

HTML では、同じクラスを持つ複数の要素に対して、それぞれの要素の表示順に応じたスタイルを適用したい場合があります。たとえば、奇数番目の要素と偶数番目の要素に異なるスタイルを適用する場合、CSS の疑似クラスを使うことで簡単に実現できます。本記事では、その具体的な方法を紹介します。

疑似クラス `:nth-child()` の基本

nth-child() は、要素の表示順に応じてスタイルを適用するための強力な疑似クラスです。nth-child() の引数には数字やキーワードを指定でき、要素の順序に基づいて異なるスタイルを簡単に適用することができます。

`nth-child(odd)` と `nth-child(even)`

最も基本的な使用方法として、奇数番目の要素と偶数番目の要素に対してスタイルを適用する方法があります。

nth-child(odd) は奇数番目の要素にスタイルを適用します。
nth-child(even) は偶数番目の要素にスタイルを適用します。

これにより、例えばリストや段落などの繰り返し要素に、交互に異なる背景色をつけることができます。

実装例

以下は、複数の <div> 要素に対して、奇数回目と偶数回目の要素に異なる背景色を適用する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇数と偶数のスタイル適用</title>
    <style>
        /* 奇数番目の要素に適用 */
        .example:nth-child(odd) {
            background-color: lightblue;
        }

        /* 偶数番目の要素に適用 */
        .example:nth-child(even) {
            background-color: lightgreen;
        }

        /* 各要素のサイズとマージンを指定 */
        .example {
            padding: 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>

    <div class="example">1つ目の要素</div>
    <div class="example">2つ目の要素</div>
    <div class="example">3つ目の要素</div>
    <div class="example">4つ目の要素</div>
    <div class="example">5つ目の要素</div>
    <div class="example">6つ目の要素</div>

</body>
</html>

解説

.example:nth-child(odd)：奇数番目の要素に lightblue の背景色を適用しています。
.example:nth-child(even)：偶数番目の要素に lightgreen の背景色を適用しています。
nth-child() は親要素の中での順序に基づくため、同じクラスを持つ要素であれば、順番通りにスタイルが適用されます。

より柔軟な `nth-child()` の使い方

nth-child() の引数は、奇数や偶数だけでなく、特定のパターンにも対応しています。たとえば、「3番目ごと」や「2つおき」など、柔軟に指定することができます。

`nth-child(n)` の使用

以下は、3つおきにスタイルを適用する例です。

.example:nth-child(3n) {
    background-color: pink;
}

このように、3n を指定すると、3の倍数の順番の要素にスタイルを適用できます。

疑似クラスの注意点

親要素との関係

nth-child() は、要素の親要素内での順番に基づいてスタイルを適用します。そのため、親要素が異なる場合や、他の兄弟要素がある場合は意図しない結果になることがあります。たとえば、次のように他のクラスの要素が間に入ると、その影響を受けます。

<div class="container">
    <div class="example">1つ目</div>
    <div>他の要素</div> <!-- この要素が順序に影響 -->
    <div class="example">2つ目</div>
</div>

この場合、2つ目 の要素は .example:nth-child(even) のスタイルが適用されることはなく、odd 扱いになります。

まとめ

nth-child() を使うことで、HTML の要素に対して奇数番目・偶数番目に異なるスタイルを適用することができます。特にリストや複数の要素が繰り返し表示される場面で、交互に背景色を変えるなどのスタイリングに非常に便利です。また、nth-child() の柔軟な指定方法を活用すれば、さらに複雑なパターンにも対応できるため、Web デザインをより洗練されたものにすることができます。