CSS :nth-last-of-type() Pseudo-Klasse
Die :nth-last-of-type() CSS-Pseudoklasse wählt Elemente vom letzten Element aufwärts aus. Lesen Sie mehr und probieren Sie Beispiele aus.
Die CSS-Pseudoklasse :nth-last-of-type() trifft Elemente eines bestimmten Typs und zählt dabei vom letzten Element dieses Typs unter seinen Geschwisterelementen. Sie ist das Spiegelbild von :nth-of-type(), das vom ersten Element aus zählt.
Dies ist nützlich, wenn die Anzahl der Elemente unbekannt ist oder sich dynamisch ändert und Sie Elemente relativ zum Ende einer Liste gestalten möchten — zum Beispiel das Hervorheben der letzten Zeilen einer Tabelle oder der abschließenden Einträge in einem Navigationsmenü, unabhängig davon, wie viele davor stehen.
Syntax
Die Pseudoklasse akzeptiert ein einzelnes Argument in den Klammern: eine Zahl, ein Schlüsselwort oder eine Formel.
:nth-last-of-type( <nth> ) {
/* style declarations */
}| Wert | Beschreibung |
|---|---|
number | Trifft das genaue n-te Element seines Typs, vom Ende gezählt (1 = das letzte). |
odd / even | Trifft Elemente an ungeraden oder geraden Positionen vom Ende gezählt. |
an + b | Trifft jedes a-te Element ab dem Versatz b, vom Ende gezählt. a und b sind ganze Zahlen, n läuft 0, 1, 2, …. |
So funktioniert die an + b-Formel
Der Browser setzt n = 0, 1, 2, … in die Formel ein und behält jede Position, die sie ergibt. Die Zählung beginnt immer beim letzten Element des passenden Typs:
2n(entsprichteven) → Positionen 2, 4, 6, … vom Ende.2n + 1(entsprichtodd) → Positionen 1, 3, 5, … vom Ende.3n + 1→ Positionen 1, 4, 7, … vom Ende.-n + 3→ die letzten drei Elemente (Positionen 3, 2, 1 vom Ende).
Unterschiede zu verwandten Selektoren
:nth-of-type()zählt die gleichen passenden Elemente, beginnt jedoch vom Anfang statt vom Ende.:nth-last-child()zählt ebenfalls vom Ende, berücksichtigt jedoch alle Geschwisterelemente, nicht nur jene desselben Typs.:nth-last-of-type()ignoriert beim Zählen Geschwister anderer Typen. Beide haben identische Spezifität.
Siehe auch :last-of-type, das äquivalent zu :nth-last-of-type(1) ist.
Beispiele
Eine genaue Position vom Ende auswählen
Hier wählt :nth-last-of-type(3) den dritten Absatz vom Ende — das ist „Paragraph 4" in einer Liste von sechs.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3) {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:nth-last-of-type() selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Die Schlüsselwörter odd und even verwenden
Vom Ende gezählt trifft odd den 1., 3., 5., … Absatz (also „Paragraph 6", „Paragraph 4", „Paragraph 2"), und even trifft den 2., 4., 6., … Absatz („Paragraph 5", „Paragraph 3", „Paragraph 1"). Zusammen gestalten sie jeden Absatz in zwei abwechselnden Farben.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-of-type(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:nth-last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</body>
</html>Eine Formel verwenden (an + b)
Bei neun Absätzen trifft 3n + 1 jeden dritten Absatz vom Ende gezählt — Positionen 1, 4 und 7 vom Ende, also der 9., 6. und 3. Absatz in der Dokumentreihenfolge.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3n+1) {
background: #767fea;
padding: 10px;
color: #ffffff;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eighth paragraph.</p>
<p>The ninth paragraph.</p>
</body>
</html>Die letzten N Elemente auswählen
Ein negativer Koeffizient ist die idiomatische Methode, um die letzten Elemente anzusprechen. -n + 3 trifft die letzten drei Absätze unabhängig von der Gesamtanzahl:
p:nth-last-of-type(-n + 3) {
font-weight: bold;
}Browser-Unterstützung und Spezifikation
:nth-last-of-type() wird von allen modernen Browsern unterstützt. Es ist definiert in: