Style for Odd Displayed Kids

Question

I am looking for a way to apply some special styles to odd (or even) children that appear (therefore excluding hidden children). Optionnaly, if these styles are applied when hidden children become visible, it will 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, this is just a display example, not caring about the crappy code that I wrote for this)

I can't handle good pseudo-classes, css selectors to handle this.

I hope you have a complete css / html solution (not js / php, which is easier)

Many thanks!

Answer 1

: 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");
});
});​

Answer 2

CSS

tr.sub { display: none; }
​.color { background: blue; }​

JS:

$(document).ready(function () {
    $('table tr:visible:even').addClass('color');

    $('#toggle').click(function () {
        $('table tr').removeClass('color');
        $('table tr.sub').toggle();
        $('table tr:visible:even').addClass('color');
    });
});​

Answer 3

tr:nth-child(even) { // your style }
tr:nth-child(odd) { // your style}

tr:nth-child(2n+0) { // your style }
tr:nth-child(2n+1) { // your style}