Stile per bambini dispari visualizzati

Question

Sto cercando un modo per applicare alcuni stili specifici su bambini dispari (o pari) che vengono visualizzati (quindi escludendo i bambini nascosti). In alternativa, se gli stili vengono applicati quando i bambini nascosti vengono visualizzati, sarebbe perfetto!

Ecco una sandbox live: http://jsfiddle.net/zrges/1/

E qui è quello che voglio visivamente: http://jsfiddle.net/qJwFj/ (ovviamente, è solo un esempio di display, non prendersi cura del codice di merda che ho scritto per questo)

Non riesco a gestire con buone pseudo classi, selettori CSS per gestirlo.

spero di avere una soluzione completa css/html (non un js/php uno, che è più facile)

Grazie mille!

Answer 1

Per le tabelle, è possibile utilizzare

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

o

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

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

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