colors - CSS または JS を使用して 2 つ以上の背景色を交互に使用する

Question

現在、繰り返される要素がいくつか<section>あり、5 つの異なる交互の背景色を割り当てたいと考えています。

現在、私は使用して:nth-of-type(#n)いますが、正しく使用していないことはほぼ確実であり、色の1つがサイクルを通じて繰り返されないという奇妙な動作が発生しています.

これはコード例です:

HTML

<section>
    <article>This is A1</article>
</section>
<section>
    <article>This is A2</article>
</section>
<section>
    <article>This is A3</article>
</section>
<section>
    <article>This is A4</article>
</section>
<section>
    <article>This is A5</article>
</section>

CSS

section:nth-of-type(1n) {
    background-color: red;
}

section:nth-of-type(2n) {
    background-color: orange;
}

section:nth-of-type(3n) {
    background-color: blue;
}

section:nth-of-type(4n) {
    background-color: green;
}

section:nth-of-type(5n) {
    background-color: gray;
}

これを行うより効率的な方法はありますか？私はこれを CSS の範囲内にとどめたいと思っていますが、JS 命令を追加してもかまいません。

これがJFiddle デモです。

どうもありがとう！