Pseudo-classe nth-last-of-type

La pseudo-classe nth-last-of-type seleziona un elemento che è l'ennesimo discendente del genitore del tipo specificato, contando dalla fine. Si comporta in modo simile a nth-of-type, solo che il conteggio avviene dalla fine.

Sintassi

selettore:nth-last-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 accedere. La numerazione degli elementi inizia da `1`.
`odd`	Elementi dispari.
`even`	Elementi pari.
espressione	È possibile creare espressioni speciali con la lettera n, che rappresenta 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` in sequenza i numeri da `0` in poi: se n = 0, allora 2n darà 0 - un tale elemento non esiste (la numerazione degli elementi parte 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° h2 nel genitore dalla fine:

<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>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
</div>

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

Esempio

Troviamo tutti gli h2 pari dalla fine:

<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>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
</div>

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

Esempio

Troviamo tutti gli h2 dispari dalla fine:

<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>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
	
	<h2>titolo</h2>
	<p>paragrafo</p>
</div>

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