Clase de pseudoelemento :nth-of-type() de CSS

Definición y uso

CSS :nth-of-type(n) de su tipo (etiqueta) en el elemento padre. n elementos hijo. El pseudo-clase se usa para coincidir con el elemento que es el

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

Consejo:Ver :nth-child() El pseudo-clase se usa para seleccionar el elemento que es el n elementos hijo, sin importar su tipo.

Ejemplo

Ejemplo 1

Cómo usar :nth-of-type() Selector:

/* Selecciona el segundo elemento entre los hermanos div */
div:nth-of-type(2) {
  fondo: rojo;
}
/* Selecciona el segundo elemento li de la lista */
li:nth-of-type(2) {
  fondo: verde claro;
}
/* Selecciona cada tercer elemento de cualquier grupo de hermanos */
:nth-of-type(3) {
  fondo: amarillo;
}

Prueba tú 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í, asignamos diferentes colores de fondo a los elementos <p> con índices impares y pares:

p:nth-of-type(impar) {
  fondo: rojo;
}
p:nth-of-type(par) {
  fondo: azul;
}

Prueba tú 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í, asignamos un color de fondo a todos los elementos <p> cuyos índices son múltiplos de 3 (lo que selecciona el tercero, sexto, noveno, etc.):

p:nth-of-type(3n+0) {
  fondo: rojo;
}

Prueba tú mismo

Ejemplo 4

Aquí, asignamos un color de fondo a todos los elementos <p> cuyos índices son múltiplos de 3. Luego restamos 1 (lo que selecciona el segundo, quinto, octavo, etc.):

p:nth-of-type(3n-1) {
  fondo: rojo;
}

Prueba tú mismo

Sintaxis CSS

:nth-of-type(í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.