enésimo hijo por cada dos filas de la tabla

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.

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.

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; } 

La respuesta de @ Eric es correcta, pero si desea ampliar fácilmente esto a grupos de 3, 4, 5, etc., y está usando Sass, aquí está el código (si desea más grupos, simplemente aumente $largestGroupSize ):

 .table-with-grouped-rows { // generate styles for .groups-of-2, .groups-of-3, etc. $largestGroupSize: 6; @for $groupNumPerColor from 2 through $largestGroupSize{ $totalGroupNum: $groupNumPerColor * 2; &.groups-of-#{$groupNumPerColor} { $start: $totalGroupNum - 1; $end: $groupNumPerColor; @for $primaryBgIndex from $start through $end { $nthString: #{$totalGroupNum}n - #{$primaryBgIndex}; > tbody > tr:nth-of-type(#{$nthString}) > td { background-color: $white; } } $start: $groupNumPerColor - 1; $end: 0; @for $alternateBgIndex from $start through $end { $nthString: #{$totalGroupNum}n - #{$alternateBgIndex}; > tbody > tr:nth-of-type(#{$nthString}) > td { background-color: $light-gray; } } } } } 

Y luego en su marcado, en el elemento

, simplemente agregaría las clases table-with-grouped-rows y groups-of-{n} . Por ejemplo, si quieres una tabla con grupos de 3, deberías escribir:

 

Auge.