Selector :nth-child CSS

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.

Comentarios

  1. edward dice:

    men sugerencia tienes un pequeño error en un item del menu revise donde dice:
    acerca de mi -portfolio-contacto
    saludos

Escribe una comentario