Псевдокласс nth-last-of-type

El pseudoclase nth-last-of-type selecciona un elemento que es el n-ésimo hijo del tipo especificado de su padre, contando desde el final. Se comporta de manera similar a nth-of-type, pero el conteo se realiza desde el final.

Sintaxis

selector:nth-last-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 acceder. La numeración de los elementos comienza desde `1`.
`odd`	Elementos impares.
`even`	Elementos pares.
expresión	Se pueden componer expresiones especiales con la letra n, que representa 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 entender esto? 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 padre desde el final:

<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>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
</div>

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

Ejemplo

Encontremos todos los h2 pares desde el final:

<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>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
</div>

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

Ejemplo

Encontremos todos los h2 impares desde el final:

<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>
	
	<h2>título</h2>
	<p>párrafo</p>
	
	<h2>título</h2>
	<p>párrafo</p>
</div>

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