Beispiel
Geben Sie eine Hintergrundfarbe für jeden <p> Element , das das zweite Kind seiner Eltern ist, aus dem letzten Kind zu zählen:
p:nth-last-child(2)
{
background: #ff0000;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die :nth-last-child( n ) - n :nth-last-child( n ) Selektor passt zu jedem Element, das das ist n - ten Kind, unabhängig von der Art, seiner Eltern, aus dem letzten Kind zu zählen.
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Tip: Schauen Sie sich die :nth-last-of-type() - n of a specified type :nth-last-of-type() Wähler das Element auszuwählen, das ist n - ten Kind, of a specified type , seiner Eltern, aus dem letzten Kind zu zählen.
| Version: | CSS3 |
|---|
Browser-Unterstützung
Die Zahlen in der Tabelle gibt die erste Browser-Version, die die Wähler voll unterstützt.
| Wähler | |||||
|---|---|---|---|---|---|
| :nth-last-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-Syntax
Mehr Beispiele
Beispiel
Odd und sind auch Schlüsselwörter, die verwendet werden können, Elemente Kind, dessen Index ungerade oder gerade passen.
Hier geben wir zwei verschiedene Hintergrundfarben für gerade und ungerade p Elemente, aus dem letzten Kind zu zählen:
p:nth-last-child(odd)
{
background: #ff0000;
}
p:nth-last-child(even)
{
background: #0000ff;
}
Versuch es selber " Beispiel
Mit Hilfe einer Formel ( an + b ) . Beschreibung: a repräsentiert eine Zyklusgröße, n ist ein Zähler (starts at 0) , und b ist ein Offsetwert.
Hier geben wir eine Hintergrundfarbe für alle p Elemente, deren Index ist ein Vielfaches von 3, aus dem letzten Kind zu zählen:
p:nth-last-child(3n+0)
{
background: #ff0000;
}
Versuch es selber "