Esto es lo más cerca que vas a llegar. Tenga en cuenta que no puede hacer que el nth-child cuente solo las filas mostradas; nth-child tomará el elemento secundario n th no importa qué, no el nth hijo que coincide con un selector dado. Si desea que falten algunas filas y que no afecten a las bandas de cebra, deberá eliminarlas completamente de la tabla, ya sea a través del DOM o del lado del servidor.
<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
</style>
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Estas son las correcciones que hice:
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
No hay necesidad de especificar un selector ancestro de un selector basado id; hay solo uno de los elementos que coinciden con #table, por lo que sólo estamos agregando código adicional mediante la adición de la table en.
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
Ahora, [@display=block] coincidiría con los elementos que tenían un conjunto de atributos display bloquear, como <tr display=block> . La pantalla no es un atributo HTML válido; lo que parece que intenta hacer es hacer que el selector coincida con el estilo del elemento, pero no puede hacerlo en CSS, ya que el navegador necesita aplicar los estilos desde el CSS antes de darse cuenta, lo cual está en proceso de hacerlo cuando está aplicando este selector. Por lo tanto, no podrá seleccionar si se muestran las filas de la tabla. Dado que nth-child solo puede tomar el n, no importa qué, no n th con algún atributo, vamos a tener que darnos por vencidos en esta parte del CSS. También hay nth-of-type, que selecciona n el hijo del mismo tipo de elemento, pero eso es todo lo que puede hacer.
#mytable tr:nth-child(odd) {
background-color: #000;
}
Y ya lo tienes.
gracias. Ya que estoy recorriendo todas las filas de la tabla usando prototipos y ocultando/mostrando según una condición de filtro en una de las celdas, ¿sería posible agregar una clase a todas las filas que no estaban ocultas, y a un NTH? -¿Niños o NTH-OF-TYPE basados en esa clase? tr .visible_row: nth-child (impar)? –
o incluso solo: .visible_row: nth-child (impar) {# 000; } –
@Alex ': nth-child' cuenta * todos * elementos secundarios del elemento principal, independientemente de si coincide con los selectores anteriores.Recuerde, juntar dos selectores sin espacio entre ellos significa hacer coincidir cualquier elemento que coincida con el primero * y * con el segundo. Entonces, si la segunda fila es invisible, '.visible_row: nth-child (even)' no coincidirá con la segunda fila, y verá la primera y la tercera filas con un estilo en el color impar, aunque la segunda fila esté oculta . Si ese es el efecto que buscas, funciona, pero probablemente quieras que las rayas de cebra solo se apliquen a las filas visibles, lo cual es imposible. –