CSS3 :nth-of-type() Selector

Ejemplos

Especifique el color de fondo de cada elemento p que coincida con el segundo elemento hermano del mismo tipo:

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

El selector :nth-of-type(n) coincide con el enésimo elemento hermano del mismo tipo.

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

Consejo:Consulte:nth-child()Selector. Este selector coincide con el enésimo elemento hijo del elemento padre. Look at the:nth-child() 。

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

Selector
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

Las palabras clave impar y par se pueden utilizar para hacer coincidir elementos hijos cuyo índice sea 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-of-type(odd)
{
background:#ff0000;
}
p:nth-of-type(even)
{
background:#0000ff;
}

Use 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 el color de fondo para todos los elementos p cuyo índice es múltiplo de 3:

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

Otras extensiones