Útil: Recetas del n-ésimo niño | Programar Plus

Me siento un poco mareado cuando encuentro usos perfectos para :nth-child o :nth-of-type (lea sobre la diferencia). ¡Cuanto mejor los entiendas, más css nerdgasms tendrás!

En estas simples “recetas” (en realidad: expresiones), usaré arbitrariamente una lista plana de elementos de la lista y números elegidos al azar. Pero debería ser bastante obvio cómo modificarlos para obtener selecciones similares.

Seleccione solo el quinto elemento

li:nth-child(5) {
    color: green;   
}

Para seleccionar el primer elemento, puede usar: first-child, o apuesto a que puede adivinar cómo modificar lo anterior para hacerlo también.

Seleccionar todo menos los cinco primeros

li:nth-child(n+6) {
    color: green;   
}

Si hubiera más de 10 elementos aquí, los seleccionaría todos más allá de 5.

Seleccione solo los primeros cinco

li:nth-child(-n+5) {
    color: green;   
}

Seleccione cada cuarto, comenzando por el primero

li:nth-child(4n-7) {  /* or 4n+1 */
    color: green;   
}

Seleccione solo impar o par

li:nth-child(odd) {
    color: green;   
}

li:nth-child(even) {
    color: green;   
}

Seleccione el último elemento

li:last-child {
    color: green;
}

Selecciona el décimo porque tenemos 10 elementos aquí, pero si hubiera 8, seleccionaría el octavo, o si hubiera 1290, seleccionaría el 1290.

Seleccione el segundo al último elemento

li:nth-last-child(2) {
    color: green;
}

Selecciona el noveno porque tenemos 10 elementos aquí, pero si hubiera 30 elementos, seleccionaría el 29.

¿Quieres jugar?

Prueba el probador.

Soporte del navegador

Suficientemente interesante, :first-child fue compatible con IE 7, pero no es hasta IE 9 donde se admite el resto de estas cosas. Aparte de IE, no hay mucha preocupación por el soporte del navegador, y si está preocupado por IE, use Selectivizr. Si las cosas de soporte del navegador son interesantes o importantes para ti, definitivamente echa un vistazo a Cuándo puedo usar… que rastrea estas cosas muy bien.

(Visited 2 times, 1 visits today)