Pseudoklasse nth-of-type

Die Pseudoklasse nth-of-type wählt ein Element aus, das das n-te Kind eines bestimmten Typs ist.

Das heißt, wenn ich h2:nth-of-type(4) schreibe, wird das 4te h2 im Elternelement gefunden (im Gegensatz zu nth-child, das nur das h2 findet, das das 4te Kindelement im Elternelement ist).

Syntax

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

}

Werte

Wert	Beschreibung
Zahl	Eine positive Zahl beginnend bei `1`. Legt die Nummer des Elements fest, das wir ansprechen möchten. Die Zählung 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` ein: wenn n = 0 ist, dann ergibt 2n 0 - ein solches Element gibt es nicht (die Zählung der Elemente beginnt bei 1), wenn n = 1 ist, dann ergibt 2n 2 - das zweite Element, wenn n = 2, ergibt 2n 4 - das vierte Element. Wenn man 3n schreibt - das ist jedes dritte Element (beginnend mit dem dritten), und so weiter.

Beispiel

Finden wir das h2, das das 2te h2 im Elternelement ist:

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

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

Beispiel

Finden wir alle geraden h2:

<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>
</div>

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

Beispiel

Finden wir alle ungeraden h2:

<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>
</div>

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