CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} Pseudo-clase para coincidir con cualquier elemento que sea el n elementos hijos

Este pseudo-clase coincide con los elementos basándose en el índice del elemento en la lista de hijos del elemento padre.

n puede ser un número/índice, una palabra clave (impar o par) o una fórmula (como an + b)

Consejo:Ver :nth-of-type() Pseudo-clase para seleccionar como elemento hijo de un elemento padre,del mismo tipo (nombre de la etiqueta)del n elementos hijos de un elemento.

Ejemplo

Ejemplo 1

Cómo usar :nth-child() Pseudo-clase:

/* Seleccionar cada cuarto elemento en cualquier grupo de hermanos */
:nth-child(4) {
  color_fondo: amarillo;
}
/* Seleccionar el segundo elemento entre los hermanos div */
div:nth-child(2) {
  color_fondo: rojo;
}
/* Seleccionar el segundo elemento li de la lista */
li:nth-child(2) {
  color_fondo: verde claro;
}

Prueba tu mismo

Ejemplo 2

impar y par es una palabra clave que se puede usar para coincidir con los elementos cuyos índices son impares o pares (el índice del primer elemento hijo es 1).

Aquí, especificamos diferentes colores de fondo para los elementos <p> cuyos índices son impares o pares:

p:nth-child(impar) {
  color_fondo: rojo;
}
p:nth-child(par) {
  fondo: verde claro;
}

Prueba tu mismo

Ejemplo 3

usar la fórmula (an + b) Descripción:a representa un paso entero, n es todos los enteros no negativos que comienzan en 0,b es un offset entero.

Aquí, especificamos el color de fondo para todos los elementos <p> cuyos índices son múltiplos de 3 (se seleccionarán los terceros, sextos,第九个, etc.):

p:nth-child(3n+1) {
  color_fondo: rojo;
}

Prueba tu mismo

Ejemplo 4

Aquí, especificamos el color de fondo para todos los elementos <p> cuyos índices son múltiplos de 3. Luego restamos 1 (se seleccionarán los primeros, cuartos, séptimos, etc.):

p:nth-child(3n-1) {
  color_fondo: rojo;
}

Prueba tu mismo

Sintaxis CSS

:nth-child(índice | impar | par | an+b) {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente este pseudo-clase.