Style for odd displayed children

Question

I'm looking a way to apply some specific styles on odd (or even) children that are displayed (so excluding hidden children). Optionnaly, if that styles applied when hidden children become displayed it would be perfect!

Here is a live sandbox : http://jsfiddle.net/zrges/1/

And here is what I visually want : http://jsfiddle.net/qJwFj/ (of course, it's only a display example, don't take care of the crappy code that I wrote for that)

I can't manage with to good pseudo classes, css selectors to handle that.

I hope to have a full css/html solution (not a js/php one, which is easier)

Thank you very much!

Answer 1

Check this out : http://jsfiddle.net/qbXVV/18/

HTML:

<button id="toggle">Toggle it!</button>
 <table>
  <tr class="sub"><td>Row 1</td></tr>
  <tr class="tag"><td>Row 2</td></tr>
  <tr class="sub"><td>Row 3</td></tr>
  <tr class="tag"><td>Row 4</td></tr>
  <tr class="sub"><td>Row 5</td></tr>
  <tr class="tag"><td>Row 6</td></tr>
  <tr class="sub"><td>Row 7</td></tr>
 </table>​

CSS:

     tr:nth-of-type(even),.bg {
        background-color: gray;
     }

    .hidden {
        display:none;   
    }​

JS:

$(document).ready(function () {
$('#toggle').click(function () {
    $('.tag').toggleClass("hidden");
    $(".sub:nth-child(4n+1)").toggleClass("bg");
});
});​