Альтернативные более двух цветов фона с CSS или JS

Question

В настоящее время у меня есть несколько < раздел> элементов, которые повторяются, и я хочу назначить 5 различных цветов фона.

Сейчас я использую : nth-of-type (#n), но я почти уверен, что я не использую его правильно, и происходит какое-то странное поведение, когда один из цветов не повторяется через цикл.

Это пример кода:

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 demo.

Большое спасибо!

Answer 1

Вы близко. Просто измените счет nth-of-type на следующее.

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

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

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

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

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

Here's the JFiddle.