CSS :nth-last-of-type() Pseudo-Klasse

Definition und Verwendung

CSS :nth-last-of-type(n) Pseudo-Klassen werden verwendet, um Elemente auszuwählen, die als das spezifische Typ-Element ihres übergeordneten Elements sind n jedes Elements.

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

Hinweis:Ansehen :nth-last-child() Pseudo-Klassen werden verwendet, um Elemente auszuwählen, die als das n-te von hinten gezählte Element ihres übergeordneten Elements sind n jedes Elements, unabhängig von seinem Typ.

Beispiel

Beispiel 1

Die Hintergrundfarbe für alle <p>-Elemente, die als das zweite von hinten gezählte <p>-Element ihres übergeordneten Elements sind, wird zugewiesen.

Gleichzeitig wird die Hintergrundfarbe für alle <li>-Elemente, die als das dritte von hinten gezählte <li>-Element ihres übergeordneten Elements sind, zugewiesen:

p:nth-last-of-type(2) {
  Hintergrund: rot;
}
li:nth-last-of-type(3) {
Hintergrund: gelb;
}

Versuchen Sie es selbst

Beispiel 2

ungerade und gerade ist ein Schlüsselwort, das zur Auswahl von Subelementen mit ungeraden oder geraden Indices verwendet werden kann (der Index des ersten Subelements ist 1).

Hier weisen wir der Hintergrundfarbe für die <p>-Elemente mit ungeraden und geraden Indices zu:

p:nth-last-of-type(ungerade) {
  Hintergrund: rot;
}
p:nth-last-of-type(gerade) {
  Hintergrund: blau;
}

Versuchen Sie es selbst

Beispiel 3

Beschreibung: a ist der Ganzzahlschritt, n sind alle nichtnegativen Ganzzahlen, die ab 0 beginnen, und b ist der Ganzzahlabstand.

Hier weisen wir der Hintergrundfarbe für alle <p> und <li>-Elemente zu, deren letzten Index ein Vielfaches von 3 ist:

p:nth-last-of-type(3n) {
  Hintergrund: rot;
}
li:nth-last-of-type(3n) {
  Hintergrund: gelb;
}

Versuchen Sie es selbst

CSS-Syntax

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

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diesen Pseudo-Klassen vollständig unterstützt.