CSS3 :nth-last-of-type()Selektoren

Vollständiges CSS-Selektor-Referenzhandbuch

Beispiel

Gibt die Hintergrundfarbe für jedes p-Element an, das dem vorletzten Geschwisterelement desselben Typs entspricht:

p:nth-last-of-type(2)
{
background:#ff0000;
}

Definition und Verwendung

:nth-last-of-type(n)-Selektor entspricht dem n-ten von hinten gezählten Geschwisterelement desselben Typs.

nEs kann eine Zahl, ein Schlüsselwort oder eine Formel sein.

Tipp:Bitte beachten Sie::nth-last-child()Selektor. Dieser Selektor entspricht dem n-ten von hinten gezählten strukturellen Kindelement innerhalb des Elternelements.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die diese Eigenschaft unterstützt.

Selektoren
:nth-last-of-type()	4.0	9.0	3.5	3.2	9.6

Weitere Beispiele

Beispiel 1

Die Schlüsselwörter odd und even können verwendet werden, um Kindelemente auszuwählen, deren Index ungerade oder gerade ist.

Hier legen wir zwei verschiedene Hintergrundfarben für ungerade und gerade nth-last p-Elemente fest:

p:nth-last-of-type(odd)
{
background:#ff0000;
}
p:nth-last-of-type(even)
{
background:#0000ff;
}

Selbst ausprobieren »

Beispiel 2

Unter Verwendung der Formel (an + b). Beschreibung: a steht für die Größe eines Zyklus, n ist ein Zähler (beginnend bei 0) und b ist ein Versatz.

Hier legen wir eine Hintergrundfarbe für alle p-Elemente fest, deren Index in umgekehrter Reihenfolge ein Vielfaches von 3 ist:

p:nth-last-of-type(3n+0)
{
background:#ff0000;
}