Grupos de x elementos en CSS nth-child

/* 1º de cada grupo de 5: 1, 6, 11, 16, ... */
selector:nth-child(5n+1) { /* estilos */ }

/* 2º de cada grupo de 5: 2, 7, 12, 17, ... */
selector:nth-child(5n+2) { /* estilos */ }

/* 3º de cada grupo de 5: 3, 8, 13, 18, ... */
selector:nth-child(5n+3) { /* estilos */ }

/* 4º de cada grupo de 5: 4, 9, 14, 19, ... */
selector:nth-child(5n+4) { /* estilos */ }

/* 5º de cada grupo de 5: 5, 10, 15, 20, ... */
selector:nth-child(5n)   { /* estilos */ }
/* o equivalentemente */
selector:nth-child(5n+5) { /* estilos */ }

¿Te ha gustado?

Suscríbete a mi newsletter para avisarte cuando suba más charlas y contenido que te pueda interesar sobre cultura.

Formulario de suscripción

Estos datos los gestiono yo misma, Flavia Bernárdez Rodríguez y están alojados en el servidor de Nicalia (una empresa de hosting sostenible buenísima cuyo datacenter está en España). Usaré los datos para enviarte emails sobre las cosas que hago, organizo o pienso. Te podrás dar de baja cuando quieras, bien cuando te envíe un mail, o bien diciéndomelo por cualquier método de contacto.