Selector CSS :nth-child()
Ejemplo
Especifique un color de fondo para cada elemento <p> que sea el segundo hijo de su padre:
p:nth-child(2)
{
background: red;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El selector coincide con cada elemento que es el enésimo hijo, independientemente del tipo, de su padre.:nth-child(n)
n puede ser un número, una palabra clave o una fórmula.
Sugerencia: Mire el selector :n-th-of-type() para seleccionar el elemento que es el n -ésimo hijo, de un tipo particular , de su padre.
Versión: | CSS3 |
---|
Compatibilidad con navegador
Los números de la tabla especifican 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
:nth-child(number) {
css declarations;
}
Más ejemplos
Ejemplo
Impar y par son palabras clave que se pueden usar para hacer coincidir elementos secundarios cuyo índice es par o impar (el índice del primer elemento secundario es 1).
Aquí, especificamos dos colores de fondo diferentes para elementos p pares e impares:
p:nth-child(odd)
{
background: red;
}
p:nth-child(even)
{
background: blue;
}
Ejemplo
Usando una fórmula ( an + b ). Descripción: a representa el tamaño de un ciclo, n es un contador (comienza en 0) yb es un valor de compensación.
Aquí, especificamos un color de fondo para todos los p elementos cuyo índice es un múltiplo de 3:
p:nth-child(3n+0)
{
background: red;
}