iiIDEA(ｲｲｱｲﾃﾞｱ)

今回は、奇数・偶数ごとに、別々のスタイルを適用させたいときに使えるCSSを紹介したいと思います。
2カラムで要素が並んでいて、『左右のmarginを別々に指定したい』というときなんかに使えます。

早速本題ですが、疑似クラスの:nth-child()を使うと、奇数・偶数の指定が可能です。

:nth-child(odd)　奇数

:nth-child(even)　偶数

このように指定します。

具体例です。
以下は、リストの奇数・偶数ごとにスタイルを変えた例です。

HTML

<div>
<ul>
<li>にんじん</li>
<li>玉ねぎ</li>
<li>じゃがいも</li>
<li>きのこ</li>
</ul>
</div>

CSS

li {
list-style: none;
padding: 0.5rem 1rem;
}

/* 奇数のスタイル */
li:nth-child(odd) {
background: rgba(255, 0, 0, 0.3);
}

/* 偶数のスタイル */
li:nth-child(even) {
background: rgba(255, 255, 0, 0.3);
}

このように指定すると下のように、
奇数のリストの背景は赤、
偶数のリストの背景は黄色になります。

便利なので、使ってみてください。