La pseudo clase :nth-child de CSS se usa para seleccionar uno o más de un grupo de elementos que tienen el mismo TAG.
Sintaxis
valor es un parámetro que represnta un elemento o una serie de elementos que coinciden con un patron.
¿Cómo seleccionar al primero elemento?
Si el parámetro es un 1, vamos a seleccionar solamente al primer elemento de un conjunto de hijos.
Ejemplo: para seleccionar al primer elemento p que tiene div sería:
¿Cómo seleccionar a un número de hijo determinado?
Si el parámetro solo es un entero, segnifica que vamos a seleccionar a un solo hijo que sería ese número.
Ejemplo: para seleccionar el tercer elemento p que tiene div sería:
¿Cómo seleccionar elementos pares e impares?
Para hacer tablas mas vistosas o funcionales tenemos que hacer que los tenglones pares e impares tengan un color diferente entre si para identificar los valores de las columnoas con cada renglón. Para esto podemos usar los valores odd y even.
¿Cómo seleccionar los renglones pares de una tabla?
El valor even corresponde a los valores pares: 2,4,6,8,...
Ejemplo:
o
¿Cómo seleccionar los renglones impares de una tabla?
El valor odd corresponde a los valores impares: 1,3,5,7,9,...
Ejemplo:
o
¿Cómo seleccionar elementos o tags que tengan una serie en particular?
Habrá ocasiones que sea necesario aplicar reglas de CSS a elementos que cumplan con una serie en particular.
Ejemplo: para seleccionar elementos de 3 en 3
Ejemplo: para seleccionar elementos de 5 en 5
¿Cómo seleccionar elementos de una serie partiendo de un número en particular?
Ejemplo: para seleccionar elementos de 3 en 3 partiendo del número 5
El valor agregado +5 indica que la seríe iniciará en el número 5 y la seríe sera de 3 en 3 (3n). Resultado: 5,8,11,14,17,...
¿Como seleccionar a los primeros n elementos?
Vamos a suponer que queremos resaltar al TOP 3 de una lista de viñetas y necesitamos seleccionarlos para aplicar un estilo diferente a los demás:
