css - plus - enésimo hijo por cada dos filas de la tabla

css selector selenium

Question

Necesito hacer que cada dos filas de mi mesa sean grises y preferiría usar nth-child si fuera posible.

Me he metido con el probador nth-child de Chris Coyier, pero todavía no lo puedo conseguir.

Necesito la siguiente fórmula:

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

y así. Preferiría no poner una clase en el html, ya que estoy seguro de que va a ser una sugerencia de algunos. Si hay una manera de llevarlo a cabo con n-child, eso es lo que estoy buscando.

Answer 1

Date cuenta de que estás haciendo grupos de 4, entonces puedes ver que puedes tener cada 4º elemento y cada 4º elemento menos uno siendo blanco, luego cada 4º elemento menos dos, o cada 4º elemento menos 3 siendo gris.

Entonces, 4n y 4n-1 , luego 4n-2 y 4n-3 :

div:nth-child(4n), div:nth-child(4n-1) {
background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
background: blue;
}

Ese código no es preciso para su caso, lo escribí para una prueba de concepto jsFiddle .

NB descargo de responsabilidad: nth-child en cuenta que nth-child no funciona en IE8. Problema típico, por supuesto.

Answer 2

Esto es lo que estoy usando para alinear a la derecha la primera columna de cada tabla.

table td:nth-child(2n-1) {
align: right;
text-align: right;
}