Is there a way to apply a gray background color to alternate items in a list, even if they are nested, without affecting the styling of consecutive elements in the nested list?
If anyone has any suggestions on how to achieve this using CSS or jQuery, please let me know.
Update
<div id='wrapper'>
<ul>
<li class='comment'><div class='aut'>the_archer</div><div class='comment-body'>Test</div><div class='timestamp'>2011-02-15 17:22:11</div><a href='#comment_form' class='reply' id='7'>Reply</a><ul><li class='comment'><div class='aut'>great</div><div class='comment-body'>t</div><div class='timestamp'>2011-02-15 17:38:43</div><a href='#comment_form' class='reply' id='8'>Reply</a><ul><li class='comment'><div class='aut'>test</div><div class='comment-body'>eee</div><div class='timestamp'>2011-02-15 17:40:21</div><a href='#comment_form' class='reply' id='10'>Reply</a><ul><li class='comment'><div class='aut'>fook</div><div class='comment-body'>kkk</div><div class='timestamp'>2011-02-15 18:07:08</div><a href='#comment_form' class='reply' id='12'>Reply</a></li></ul></li><li class='comment'><div class='aut'>Anonymouse</div><div class='comment-body'>dsdsd</div><div class='timestamp'>2011-02-15 17:44:53</div><a href='#comment_form' class='reply' id='11'>Reply</a></li><li class='comment'><div class='aut'>bbbb</div><div class='comment-body'>bbbb</div><div class='timestamp'>2011-02-15 18:32:23</div><a href='#comment_form' class='reply' id='14'>Reply</a></li></ul></li><li class='comment'><div class='aut'>w</div><div class='comment-body'>www</div><div class='timestamp'>2011-02-15 17:39:29</div><a href='#comment_form' class='reply' id='9'>Reply</a></li></ul></li><li class='comment'><div class='aut'>t</div><div class='comment-body'>t</div><div class='timestamp'>2011-02-15 18:30:09</div><a href='#comment_form' class='reply' id='13'>Reply</a></li></ul>
</div>
CSS:
.comment-style{background: gray;}
Jquery
$('ul li.comment:odd').addClass('comment-style');