Estilo para niños mostrados en forma impar

Question

Estoy buscando la forma de aplicar algunos estilos específicos en niños impares (o incluso) que se muestran (excluyendo niños ocultos). ¡De manera opcional, si los estilos aplicados cuando los niños ocultos se muestran, sería perfecto!

Aquí es una caja de arena en vivo: http://jsfiddle.net/zrges/1/

Y esto es lo que visualmente quiero: http://jsfiddle.net/qJwFj/ (por supuesto, es sólo un ejemplo de visualización, no cuidar el código de mierda que escribí para eso)

No me las puedo arreglar con buenas pseudoclases, selectores css para manejar eso.

espero tener una solución completa css/html (no es un js/php uno, lo que es más fácil)

Muchas gracias!

Answer 1

Para las tablas, puede utilizar

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

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