CSS :nth-last-child() Selektor
Beispiel
Geben Sie eine Hintergrundfarbe für jedes <p>-Element an, das das zweite untergeordnete Element seines übergeordneten Elements ist, beginnend mit dem letzten untergeordneten Element:
p:nth-last-child(2)
{
background: red;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Der Selektor stimmt mit jedem Element überein, das das n -te Kind, unabhängig vom Typ, seines Elternteils ist, gezählt vom letzten Kind.:nth-last-child(n)
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Tipp: Sehen Sie sich den Selektor :nth-last-of-type() an, um das Element auszuwählen, das das n -te untergeordnete Element eines angegebenen Typs seines übergeordneten Elements ist, gezählt ab dem letzten untergeordneten Element.
Ausführung: | CSS3 |
---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die den Selektor vollständig unterstützt.
Selector | |||||
---|---|---|---|---|---|
:nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-Syntax
:nth-last-child(number) {
css declarations;
}
Mehr Beispiele
Beispiel
Ungerade und gerade sind Schlüsselwörter, die verwendet werden können, um untergeordnete Elemente abzugleichen, deren Index ungerade oder gerade ist.
Hier geben wir zwei verschiedene Hintergrundfarben für ungerade und gerade p-Elemente an, gezählt vom letzten Kind:
p:nth-last-child(odd)
{
background: red;
}
p:nth-last-child(even)
{
background: blue;
}
Beispiel
Mit einer Formel ( an + b ). Beschreibung: a stellt eine Zyklusgröße dar, n ist ein Zähler (beginnt bei 0) und b ist ein Offset-Wert.
Hier geben wir eine Hintergrundfarbe für alle p-Elemente an, deren Index ein Vielfaches von 3 ist, gezählt vom letzten Kind:
p:nth-last-child(3n+0)
{
background: red;
}