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.