Ejemplo
Especificar un color de fondo para cada <p> elemento que es el segundo hijo de su padre:
p:nth-child(2)
{
background: #ff0000;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El :nth-child( n ) selector equivale a todos los elementos que es el n º niño, independientemente del tipo, de su matriz.
n puede ser un número, una palabra clave o una fórmula.
Tip: Mira el : nth-de-tipo () selector para seleccionar el elemento que es el n º niño, of a particular type , de su matriz.
| Versión: | CSS3 |
|---|
Soporte para el navegador
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el selector.
| Selector | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
sintaxis CSS
Más ejemplos
Ejemplo
Palabras clave pares e impares son que se pueden utilizar para que coincida con elementos secundarios cuyo índice es par o impar (the index of the first child is 1) .
A continuación, especificamos dos diferentes colores de fondo para los elementos pares e impares p:
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
Inténtalo tú mismo " Ejemplo
El uso de una fórmula ( an + b ) . Descripción: a representa un tamaño de ciclo, n es un contador (starts at 0) , y b es un valor de desplazamiento.
A continuación, se especifica un color de fondo para todos los p elementos cuyo índice es un múltiplo de 3:
p:nth-child(3n+0)
{
background: #ff0000;
}
Inténtalo tú mismo "