CSS :n-ter-letzter-Typ()- Selektor
Beispiel
Geben Sie eine Hintergrundfarbe für jedes <p>-Element an, das das zweite p-Element seines übergeordneten Elements ist, beginnend mit dem letzten untergeordneten Element:
p:nth-last-of-type(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 eines bestimmten Typs seines Elternteils ist, gezählt vom letzten Kind.:nth-last-of-type(n)
n kann eine Zahl, ein Schlüsselwort oder eine Formel sein.
Tipp: Sehen Sie sich den Selektor :nth-last-child() an, um das Element auszuwählen, das das n -te untergeordnete Element, unabhängig vom Typ , 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-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS-Syntax
:nth-last-of-type(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 (der Index des ersten untergeordneten Elements ist 1).
Hier geben wir zwei verschiedene Hintergrundfarben für ungerade und gerade p-Elemente an:
p:nth-last-of-type(odd)
{
background: red;
}
p:nth-last-of-type(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:
p:nth-last-of-type(3n+0)
{
background: red;
}