Siempre me resulta muy difícil acordarme de como debo de usar los selectores :nth-child de CSS. Al final siempre tengo que buscar en google alguna pagina que me lo explique bien.
Hoy he tenido la suerte de encontrarme con el articulo Useful :nth-child Recipes de página de css-tricks.com, en el que a través de unos sencillos ejemplos podemos ver los típicos casos de usos de este selector.
También podemos probar tanto como queramos en este :nth tester
/* Seleccionar el elemento 5 */ li:nth-child(5) { ... } /* Seleccionar todos menos los primeros 5 elementos */ li:nth-child(n+6) { ... } /* Seleccionaar los primeros 5 elementos */ li:nth:child(-n+5) { ... } /* Seleccionar un elemento cada 4 */ li:nth-child(4n+1) { ... } /* Seleccionar solo los elementos impares */ li:nth-child(odd) { ... } /* Seleccionar solo los elementos pares */ li:nth-child(even) { ... } /* Seleccionar el último elemento */ li:last-child { ... } /* Seleccionar el penúltimo elemento */ li:nth-last-child(2) { ... }
El próximo día ya me acordaré que debo de acudir a esta web directamente.