CSS :nth-last-child() Pseudo-Klasse

Definition und Verwendung

CSS :nth-last-child(n) Pseudo-Klassen werden verwendet, um alle Elemente zu matchen, die als letztes Kind eines Elternelements in einer bestimmten Reihenfolge stehen, egal welche Art sie sind.

n kann eine Zahl/Indiz, ein Schlüsselwort (ungerade oder gerade) oder eine Formel (wie an + b)

Hinweis:Ansehen :nth-last-of-type() Pseudo-Klassen dienen dazu, Elemente auszuwählen, die als letztes Kind eines Elternelements in einer bestimmten Reihenfolge stehen, egal welche Art sie sind. n des Kindes eines Elements, das ein Kind eines anderen Elements ist.

Beispiel

Beispiel 1

Legen wir die Hintergrundfarbe für alle <p>-Elemente fest, die als zweites Kind ihres Elternelements betrachtet werden:

p:nth-last-child(2) {
  background-color: rot;
}

Versuchen Sie es selbst

Beispiel 2

ungerade und gerade ist ein Schlüsselwort, das verwendet werden kann, um Kindelemente mit ungeradem oder geradem Index zu matchen.

Hier legen wir die Hintergrundfarbe für alle <p>-Elemente fest, deren Index ungerade oder gerade ist:

p:nth-last-child(ungerade) {
  background-color: rot;
}
p:nth-last-child(gerade) {
  background-color: blau;
}

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie die Formel (an + bBeschreibung:a stellt einen ganzzahligen Schritt dar, n sind alle nichtnegativen Ganzzahlen, beginnend mit 0,b ist ein ganzzahliger Versatz.

Hier legen wir die Hintergrundfarbe für alle <p>-Elemente fest, deren Index eine 3-fache Zahl ist:

p:nth-last-child(3n+0) {
  background-color: rot;
}

Versuchen Sie es selbst

CSS-Syntax

:nth-last-child(index oder ungerade | gerade | an+b) {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die den Pseudo-klasse vollständig unterstützt.