Alternate more than 2 background colors with CSS or JS -

I currently have several & lt; Section and gt; Elements that repeat themselves and I want to allocate a 5 different alternative background colors.

Right now I am : nth-of-type (#n) / strong> But I am almost positive that I am not using it right and there is some strange behavior where a color wheel Does not repeat through.

This is an example code:

HTML

  & lt; Section & gt; & Lt; Articles & gt; This is A1 & lt; / Article & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; Article & gt; This is A2 & lt; / Article & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; Articles & gt; This is A3 & lt; / Article & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; Articles & gt; This is A4 & lt; / Article & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; Articles & gt; This is A5 & lt; / Article & gt; & Lt; / Section & gt;   
  CSS   
  section: nth-of-type (1n) {background-color: red; } Section: NT-OF-Type (2n) {background color: orange; } Section: NT-OF-Type (3n) {background-color: blue; } Section: nth-of-type (4n) {background-color: green; } Section: NT-OF-Type (5N) {background-color: gray; }   
 Is there a more efficient way to do this? I like to keep it under the scope of CSS but I have no problem adding JS instructions.  
 Here it is.  
 Many thanks!   
 
 
 You are closed, just change your nth-of-type counting to the following.  
  section: nth-of-type (5n + 1) {background-color: red; } Section: NT-OF-Type (5n + 2) {background-color: orange; } Section: NT-OF-Type (5n + 3) {background-color: blue; } Section: NT-OF-Type (5N + 4) {background-color: green; } Section: nth-of-type (5n + 5) {background-color: gray; }   
.