Pseudoclase nth-of-type

La pseudoclase nth-of-type selecciona un elemento, que es el enésimo descendiente del tipo especificado.

Es decir, si escribo h2:nth-of-type(4) - se encontrará el 4-to h2 en el elemento padre (a diferencia de nth-child, que solo encontrará aquel h2 que es el 4-to elemento en el elemento padre).

Sintaxis

selector:nth-of-type(número | odd | even | expresión){

}

Valores

Valor	Descripción
número	Número positivo comenzando desde `1`. Especifica el número del elemento, al que queremos aplicar el estilo. La numeración de elementos comienza desde `1`.
`odd`	Elementos impares.
`even`	Elementos pares.
expresión	Se pueden componer expresiones especiales con la letra n, que denota todos los números enteros desde cero (no desde uno) hasta el infinito. Así, `2n` significa todos los números pares (comenzando desde el segundo). ¿Cómo entenderlo? Sustituimos en `n` secuencialmente números desde `0` y así sucesivamente: si n = 0, entonces 2n dará 0 - no existe tal elemento (la numeración de elementos es desde 1), si n = 1, entonces 2n dará 2 - el segundo elemento, si n = 2, 2n da 4 - el cuarto elemento. Si escribimos 3n - esto será cada tercer elemento (comenzando desde el tercero), y así sucesivamente.

Ejemplo

Encontremos el h2 que es el 2-do h2 en el elemento padre:

<div>
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

Ejemplo

Encontremos todos los h2 pares:

<div>
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

Ejemplo

Encontremos todos los h2 impares:

<div>
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}