CSS3 :nth-child()Selector

CSS完整选择器 Manual de referencia completo de selectores CSS

Ejemplos

Especifica el color de fondo del segundo elemento hijo dentro del elemento padre que coincide con cada elemento p:

p:nth-child(2) { background:#ff0000; }

Definición y uso

El selector :nth-child(n) coincide con el enésimo elemento hijo dentro de su elemento padre, sin limitación en el tipo de elemento.

nPuede ser un número, una palabra clave o una fórmula.

Consejo:Consulteselector. Este selector coincide con el enésimo elemento hermano del mismo tipo.

Sintaxis

element:nth-child(n)

elementes el elemento HTML que deseas seleccionar.
nes un parámetro, que puede ser una palabra clave (comooddoeven), o una expresión (como2n+1）。

Las palabras clave odd y even

oddSelecciona los elementos hijos en posiciones impares.
evenSelecciona los elementos hijos en posiciones pares.

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que admite esta propiedad.

Selector
:nth-child()	4.0	9.0	3.5	3.2	9.6

Más ejemplos

Ejemplo 1

Las palabras clave "odd" y "even" se pueden usar para hacer coincidir los elementos hijos cuyo índice es impar o par (el índice del primer hijo es 1). Aquí, especificamos dos colores de fondo diferentes para los elementos p pares e impares:

p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; }

Pruébalo »

Ejemplo 2

Usa la fórmula (an + b). Descripción: a representa el tamaño de un ciclo, n es un contador (comienza desde 0) y b es el desplazamiento. Aquí, especificamos un color de fondo para todos los elementos p cuyo índice es múltiplo de 3:

p:nth-child(3n+0) { background:#ff0000; }