Question

Hola comunidad, tengo una pregunta que no paro de darle vueltas y por mas que parezca fácil no consigo solucionarlo.

Bueno para hacerlo de manera alternada hago uso de este código y me funciona perfectamente:

tr:nth-child(odd){
       background-color: #B0B0B0;
       color: #000000;
}
tr:nth-child(even){
        background-color: #A0A0A0;
        color: #000000;
}

El problema reside cuando quiero que el estilo se le aplique de dos en dos filas, he investigado y se que se e pueden añadir unos numero donde va odd y even pero no consigo hacerlo y sin necesidad de aplicar estilos adicionales o jQuery entre otros procedimientos.

Espero vuestra respuesta, un saludos!

Answer 1

Como muy bien dices, puedes aplicar el estilo en función de evaluación de fórmulas "matemáticas" en lugar del simple odd y even. Para el caso que propones, yo solo he conseguido una solución repetiendo 2 veces la regla:

• Una regla para las filas 2, 6, 10, 14...
• Una regla para las filas 3, 7, 11, 15...

Igual jugando más con las posibles fórmulas y sucesiones consigues unificarlo. El código de mi prueba queda:

tr:nth-child(4n+2) {background: #CCC}
tr:nth-child(4n+3) {background: #CCC}

Lo he puesto en práctica en Jsfiddle y parece que funciona, puedes verlo aquí.