Pseudoclasse nth-of-type

A pseudoclasse nth-of-type seleciona um elemento que é o enésimo descendente do tipo especificado.

Ou seja, se eu escrever h2:nth-of-type(4) - será encontrado o 4° h2 no elemento pai (ao contrário da nth-child, que encontrará apenas o h2 que é o 4° elemento no elemento pai).

Sintaxe

seletor:nth-of-type(número | odd | even | expressão){

}

Valores

Valor	Descrição
número	Um número positivo a partir de `1`. Especifica a posição do elemento ao qual queremos nos referir. A numeração dos elementos começa em `1`.
`odd`	Elementos ímpares.
`even`	Elementos pares.
expressão	É possível criar expressões especiais com a letra n, que representa todos os números inteiros a partir de zero (não de um) até o infinito. Assim, `2n` significa todos os números pares (a partir do segundo). Como entender isso? Substituímos `n` sequencialmente por números de `0` em diante: se n = 0, então 2n resulta em 0 - esse elemento não existe (a numeração dos elementos começa em 1), se n = 1, então 2n resulta em 2 - o segundo elemento, se n = 2, 2n resulta em 4 - o quarto elemento. Se escrevermos 3n - isso será cada terceiro elemento (a partir do terceiro), e assim por diante.

Exemplo

Vamos encontrar o h2 que é o 2° h2 no elemento pai:

<div>
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
</div>

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

Exemplo

Vamos encontrar todos os h2 pares:

<div>
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
</div>

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

Exemplo

Vamos encontrar todos os h2 ímpares:

<div>
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
	
	<h2>título</h2>
	<p>parágrafo</p>
</div>

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