CSS 色を行ごとに交互に設定したい

Question

実現したいこと

cssで背景色を一行ごとに交互に設定したいです。
下記の画像のようなイメージで、コンテンツは横並びを想定しています。

カスタムフィールドで管理するため、コンテンツの数が定まっておらず、一つ一つ個別で設定することは避けたいです。

もし良い設定方法ご存知の方いらっしゃいましたらご教示いただけますと幸いです。

該当のソースコード

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul li {
    width: 48%;
}

Answer 1

4つを単位として考えて、「1つ目・4つ目」と「2つ目・3つ目」にそれぞれスタイルを掛ける形はどうでしょうか？

ul>*:nth-child(4n+1), ul>*:nth-child(4n) {
  background-color: yellow
}
ul>*:nth-child(4n+2), ul>*:nth-child(4n+3) {
  background-color: green
}

jsFiddleでの試作品

Comments

[asdfdsa]

ご回答いただきありがとうございます！
こういった考え方があるのですね。大変勉強になりました。。
試作品までありがとうございます。実務で活用させていただきます。