How to alternate style (background color) for a div inside a div

Question

How to alternate style (background color with jquery) for div inside div with id = "container" alternately (even and odd) if I have HTML like this

<div id="container"> <div></div> <div></div> <div></div> <div></div> ... </div> 

I know with a table like

 #tbl_users tr:nth-child(even) {background: #CCC;} #tbl_users tr:nth-child(odd) {background: #FFF;} 

but how does a div apply something like this?

Answer 1

Have you tried:

 div#container div:nth-child(even) {background: #CCC;} div#container div:nth-child(odd) {background: #FFF;} 

nth-child should work regardless of the tag.

Answer 2

 $('#container>div:odd').css("background-color", "#ff0000"); $('#container>div:even').css("background-color", "#00ff00"); 

Answer 3

It works just like with a div. With the above structure, you can get the same effect:

 #container div:nth-child(even) {background: #CCC;} #container div:nth-child(odd) {background: #FFF;} 

Answer 4

using the same trick:

 #container div:nth-child(even) {background: #CCC;} #container div:nth-child(odd) {background: #FFF;} 

Answer 5

 <div id="container"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> </div> div#container div:nth-child(even) {background: #FF00CC;} div#container div:nth-child(odd) {background: #CC00FF;} 

Please try this link http://codebins.com/codes/home/4ldqpbz