Beispiel
Geben Sie eine Hintergrundfarbe für jeden <p> Element , das die zweite p - Element seines Vaters ist, aus dem letzten Kind zu zählen:
p:nth-last-of-type(2)
{
background: #ff0000;
}
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die :nth-last-of-type( n ) - n :nth-last-of-type( n ) Selektor passt zu jedem Element, das das ist n - ten Kind, einer bestimmten 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 : n - n regardless of type te-last-child () Selektor das Element auszuwählen, das ist n - ten Kind, regardless of 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-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-Syntax
Mehr Beispiele
Beispiel
Gerade und ungerade sind Schlüsselwörter , die verwendet werden können , Elemente Kind , dessen Index ungerade oder gerade zu entsprechen (the index of the first child is 1) .
Hier geben wir zwei verschiedene Hintergrundfarben für gerade und ungerade p Elemente:
p:nth-last-of-type(odd)
{
background: #ff0000;
}
p:nth-last-of-type(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:
p:nth-last-of-type(3n+0)
{
background: #ff0000;
}
Versuch es selber "