Change only pair or unpair divs from a container

Question

I'm trying to make pair or unpair divs from a container to have a different background. For example the first one has a red background, the second blue, the third red the fourth blue and so...

This is my code:

<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

div { width:50px; height:50px; background:red; }

I really don't know how to achieve this. I don't know if I need only css or jquery too.

Thank you.

Answer 1

use pseudo selector nth-child of CSS property . By using this u can select odd even node

div:nth-child(odd) { background-color: #FF0000; }
div:nth-child(even) { background-color: #0000FF; }

Answer 2

You can do this with just CSS by using the :nth-child selector:

div { width: 50px; height: 50px; }
div:nth-child(odd) { background-color: red; }
div:nth-child(even) { background-color: blue; }

jsfiddle