title: Group HTML element in groups of 2
body: <p>I have some HTML that looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="primary-billing"&gt;
    &lt;div&gt;1&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;10&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;4&lt;/div&gt;
    &lt;div&gt;3&lt;/div&gt;
    &lt;div&gt;10&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
    &lt;div&gt;5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I want to group the elements in groups of two so that I can set each groups background to a different color, right now I am doing it like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.primary-billing div:nth-child(n+1):nth-child(-n+2){
     background: yellow;   
  }
  
  .primary-billing div:nth-child(n+3):nth-child(-n+4){
     background: blue;   
  }
  
  .primary-billing div:nth-child(n+5):nth-child(-n+6){
     background: purple;   
  }
  </code></pre>
  
  <p>But as in my actual code it is much longer and there must be a better way, I'm also trying to do it in Javascript where I could have an array of the colors I wanted, but still am not sure how to group the element in groups of 2. Here is a JSBin with the code <a href="http://jsbin.com/rilumikaye/edit?html,css,js,console,output" rel="nofollow">JSBin</a></p>
  
  <p>How could I get them in groups of two using Javascript or CSS?</p>