【CSS】奇数や偶数の要素にだけスタイルを適応する方法

あなたは「偶数番目の要素にだけスタイルを当てたいな〜」と思ったことはないでしょうか？

今回はCSSで奇数や偶数の要素にだけスタイルを適応する方法を紹介します。

奇数の要素にだけスタイルを適応させたい場合は、「:nth-child(odd)」にスタイルを書けばOK。

◎HTML

<!-- 奇数 -->
<ul>
    <li>テキスト1</li>
    <li>テキスト2</li>
    <li>テキスト3</li>
    <li>テキスト4</li>
    <li>テキスト5</li>
</ul>

◎CSS

/* 奇数 */
ul {
    list-style: none;
}
ul li:nth-child(odd) {
    background-color: #000;
    color: #fff;
}

結果は以下のように表示されます。

ちゃんと奇数の要素にだけ背景色がついていますね。

偶数の要素にだけスタイルを適応させたい場合は、「:nth-child(even)」にスタイルを書けばOK。

◎HTML

<!-- 偶数 -->
<ul>
    <li>テキスト1</li>
    <li>テキスト2</li>
    <li>テキスト3</li>
    <li>テキスト4</li>
    <li>テキスト5</li>
</ul>

◎CSS

/* 奇数 */
ul {
    list-style: none;
}
ul li:nth-child(even) {
    background-color: #000;
    color: #fff;
}

結果は以下のように表示されます。

ちゃんと偶数の要素にだけ背景色がついていることが分かると思います。

まとめ

以上が、CSSで奇数や偶数の要素にだけスタイルを適応する方法でした。