Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >:nth-of-type()

:nth-of-type()

:nth-of-type(An+B) :nth-last-of-type(An+B)

Wie :nth-child(), zählt aber nur Geschwister desselben Typs (desselben Elementnamens). p:nth-of-type(2) ist der zweite Absatz im Elternelement, auch wenn davor Überschriften oder Bilder stehen. :nth-last-of-type() zählt genauso, nur vom Ende. Spezifität 0-1-0.

Werte

odd, even, 3, 3n, n+4, -n+3 – dieselbe Formel An+B wie bei :nth-child().
Die Syntax of S gibt es hier nicht.

Beispiele

Jeder gerade Absatz hat einen Hintergrund, die Überschrift am Anfang zählt nicht. Mit p:nth-child(even) bekämen der erste und dritte Absatz den Hintergrund:

<div class="article">
  <h4>Überschrift</h4>
  <p>Der erste Absatz.</p>
  <p>Der zweite Absatz.</p>
  <p>Der dritte Absatz.</p>
  <p>Der vierte Absatz.</p>
</div>

.article h4,
.article p {
  margin: 0;
  padding: 4px 8px;
}
.article p:nth-of-type(even) { background: #fff3e0; }

Ergebnis

Überschrift

Der erste Absatz.

Der zweite Absatz.

Der dritte Absatz.

Der vierte Absatz.

Worauf Sie achten sollten

Der Typ ist der Elementname, keine Klasse: .note:nth-of-type(2) bedeutet nicht „der zweite Hinweis“, sondern ein Element mit der Klasse note, das das zweite Element seines Typs ist (zum Beispiel der zweite p). Das zweite Element mit der Klasse wählt :nth-child(2 of .note).
Ohne Typ vor dem Doppelpunkt (:nth-of-type(2)) gilt sie für das zweite Element jedes Typs einzeln – den zweiten Absatz, das zweite Bild, die zweite Überschrift…
Versteckte Elemente zählen genauso wie bei :nth-child().

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 3.5, Safari 3.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
:nth-child()
:first-of-type und :last-of-type
:nth-last-child()
Typselektor (p, div…)