zebra-striping

I have a long list of multiple div... let's say 20 div All wrap in another one.. <div id="main"> <div class="xyz"> text text </div> <div class="xyz"> text text </div> <div class="xyz"> text text </div> <div class="xyz"> text text </div> <div class="xyz"> text text </div> .... etc </div> i like to add class "grey" in one out of two div and make it zebra ! jquery please ! $('.xyz:odd').addClass('grey'); Do mind that 'grey' is not a semantic classname. Better call id 'odd' or 'zebra' or something. If you'd make up your mind and change the odd color to blue your classname would be real strange :P

I'm trying to zebra stripe my divs in my website, sounds simple enough, however I've found that when I added a header in between the rows of my divs it seems to count the header in the odd/even styling HTML <div class="container"> <h3>Title</h3> <div class="row">Content</div> <div class="row">Content</div> <h3>Title</h3> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> <h3>Title</h3> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> <div class="row">Content</div> </div> CSS .container { width:600px; margin:0

We cannot get zebra striping to work in jqGrid. We use altclass and altRows - issue is it appears the ui-widget-content class from the JQuery UI has a background setting which is overriding our altclass's background setting. Any ideas? Update : Both answers below work. Oleg's is the cleanest solution by far. For Oleg's solution to work, your altRows class has to be defined after including the JQuery UI CSS class as both the JQuery UI and the custom alt rows class define the background property and the last class defined wins . jqGrid use jQuery UI class 'ui-priority-secondary' as the default