Teemfreenedug
New Member
I've got the following code snippet:\[code\]<div class="data"> <h2>Some Title</h2> <div id="aPanel75" class="aPanel"> <span> <div class="nameValueHelp field"> <span class="name">Field Label 1</span> <span class="value"><span>Value 1</span></span> <span class="help">...</span> </div> </span> <span> <div class="nameValueHelp field"> <span class="name">Field Label 2</span> <span class="value"><span>Value 2</span></span> <span class="help">...</span> </div> </span> <span> <div class="nameValueHelp field"> <span class="name">Field Label 3</span> <span class="value"><span>Value 3</span></span> <span class="help">...</span> </div> </span> </div></div>\[/code\]that gets zebra striped with a bit of jQuery and CSS:\[code\]$('.data .field').filter(':even').addClass('odd');\[/code\]and\[code\].data .odd { background-color: #EDF0F5;}\[/code\]I'd like to get rid of the jQuery that adds the 'odd' class and just use CSS. I've tried various combinations of the CSS nth-child selector (also nth-of-type). But nothing seems to work, I get all grey and no white.I think those superfluous span tags around the div.field are the issue, but unfortunately I can't easily change the underlying HTML structure or change any tag classes.Any suggestions please?