Pseudoclasse nth-of-type

La pseudoclasse nth-of-type seleziona un elemento, che è l'ennesimo discendente di un tipo specificato.

Cioè, se scrivo h2:nth-of-type(4) - troverà il 4-esimo h2 nel genitore (a differenza di nth-child, che troverà solo quell'h2 che è il 4-esimo elemento nel genitore).

Sintassi

selettore:nth-of-type(numero | odd | even | espressione){

}

Valori

Valore	Descrizione
numero	Un numero positivo a partire da `1`. Specifica il numero dell'elemento a cui vogliamo fare riferimento. La numerazione degli elementi inizia da `1`.
`odd`	Elementi dispari.
`even`	Elementi pari.
espressione	È possibile creare espressioni speciali con la lettera n, che indica tutti i numeri interi da zero (non da uno) a infinito. Quindi, `2n` significa tutti i numeri pari (a partire dal secondo). Come capirlo? Sostituiamo in `n` sequenzialmente i numeri da `0` in poi: se n = 0, allora 2n darà 0 - un tale elemento non esiste (la numerazione degli elementi inizia da 1), se n = 1, allora 2n darà 2 - il secondo elemento, se n = 2, 2n dà 4 - il quarto elemento. Se scriviamo 3n - questo sarà ogni terzo elemento (a partire dal terzo), e così via.

Esempio

Troviamo l'h2 che è il 2-esimo h2 nel genitore:

<div>
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
</div>

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

Esempio

Troviamo tutti gli h2 pari:

<div>
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
</div>

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

Esempio

Troviamo tutti gli h2 dispari:

<div>
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
</div>

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