jQuery set alternating color rows

Question

I'm looking for a specific answer to my question. And this is, I have a row containing a quantity of divs (is dynamically set). What I want is alternately the background of divs (3 divs) are set to another color like this: Can this be done by the CSS odd and even pseudo classes or should this be done through jQuery?

Answer 1

You can do this by adding this to your CSS.. foo:nth-child(n+3)

UPDATED:

ul li:nth-child(6n+4),
ul li:nth-child(6n+5),
ul li:nth-child(6n+6) {
  border: 1px solid red;
}

^ Altough I'm not a fan, it works.

http://codepen.io/pacMakaveli/pen/JdWYoM

Answer 2

You can do by using:

li:nth-child(6n),
li:nth-child(6n - 1),
li:nth-child(6n - 2) {background: red;}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
</ul>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>