Pseudoklasse nth-last-of-type

Der Pseudoklasse nth-last-of-type wählt ein Element aus, das das n-te Kind des Elternelements eines bestimmten Typs ist, gezählt vom Ende her. Verhält sich ähnlich wie nth-of-type, nur dass die Zählung vom Ende aus erfolgt.

Syntax

Selektor:nth-last-of-type(Zahl | odd | even | Ausdruck) {
	
}

Werte

Wert	Beschreibung
Zahl	Eine positive Zahl beginnend ab `1`. Gibt die Nummer des Elements an, das wir ansprechen möchten. Die Nummerierung der Elemente beginnt bei `1`.
`odd`	Ungerade Elemente.
`even`	Gerade Elemente.
Ausdruck	Es können spezielle Ausdrücke mit dem Buchstaben n gebildet werden, der alle ganzen Zahlen von null (nicht von eins) bis unendlich repräsentiert. So bedeutet `2n` alle geraden Nummern (beginnend mit der zweiten). Wie ist das zu verstehen? Wir setzen in `n` der Reihe nach Zahlen ab `0` und so weiter ein: wenn n = 0, dann ergibt 2n 0 - ein solches Element gibt es nicht (Elementnummerierung beginnt bei 1), wenn n = 1, dann ergibt 2n 2 - das zweite Element, wenn n = 2, ergibt 2n 4 - das vierte Element. Wenn man 3n schreibt, wird jedes dritte Element ausgewählt (beginnend mit dem dritten), und so weiter.

Beispiel

Finden wir das h2, das das 2.-te h2 im Elternelement vom Ende her ist:

<div>
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
</div>

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

Beispiel

Finden wir alle geraden h2 vom Ende her:

<div>
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
</div>

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

Beispiel

Finden wir alle ungeraden h2 vom Ende her:

<div>
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
	
	<h2>Überschrift</h2>
	<p>Absatz</p>
</div>

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