CSS :nth-last-child Pseudo-Klasse
Die :nth-last-child() CSS-Pseudo-Klasse wählt Elemente vom letzten Element rückwärts aus. Verwendung, Erklärung und Beispiele.
Die :nth-last-child()-Pseudo-Klasse wählt Elemente anhand ihrer Position innerhalb einer Gruppe von Geschwisterelementen aus, wobei vom letzten Element rückwärts gezählt wird. Sie ist das Spiegelbild von :nth-child(): Statt vom Anfang wird vom Ende her gezählt.
Damit ist sie das richtige Werkzeug, wenn es auf den Abstand eines Elements vom Ende einer Liste ankommt — zum Beispiel, um das letzte Element, die letzten paar Elemente oder „alle Elemente außer dem letzten" zu gestalten. Da die Zählung von unten beginnt, funktioniert die Regel auch dann noch korrekt, wenn Elemente am Anfang der Liste hinzugefügt oder entfernt werden.
Das Argument in den Klammern kann eine einzelne Zahl, ein Schlüsselwort (odd / even) oder eine An+B-Formel sein.
Unterschied zu :nth-child()
Beide Pseudo-Klassen zählen unter Geschwisterelementen, jedoch in entgegengesetzten Richtungen:
:nth-child(1)wählt das erste Geschwisterelement.:nth-last-child(1)wählt das letzte Geschwisterelement (entspricht:last-child).
So wählt li:nth-last-child(2) immer das vorletzte Listenelement, unabhängig davon, wie viele Elemente davor stehen. Verwenden Sie :nth-last-child(), wenn Ihr Stil am Ende der Gruppe verankert ist und nicht am Anfang.
Hinweis:
:nth-last-child()zählt alle Geschwisterelemente unabhängig vom Typ. Wenn Sie nur Geschwister desselben Elementtyps zählen möchten (vom Ende her), verwenden Sie stattdessen:nth-last-of-type().
Schlüsselwortwerte
odd
Wählt Elemente mit ungeraden Indexnummern aus (z. B. 1, 3, 5, 7 usw.).
even
Wählt Elemente mit geraden Indexnummern aus (z. B. 2, 4, 6, 8 usw.).
Funktionsnotation
<An+B>
Wählt Elemente aus, deren numerische Position (vom letzten Geschwisterelement aus gezählt) dem Muster An+B entspricht, ausgewertet für jeden nicht-negativen ganzzahligen Wert von n (0, 1, 2, …). Der Index des letzten Elements ist 1. A und B müssen ganze Zahlen sein und können negativ sein: A definiert den Schritt (Musterlänge) und B den Versatz.
Einige gängige Formeln, mit der Zählrichtung im Blick:
| Formel | Trifft zu auf (vom Ende gezählt) |
|---|---|
2n | Jedes 2. Element (even) |
2n+1 | Jedes zweite Element, beginnend beim letzten (odd) |
3 | Nur das drittletzte Element |
n+3 | Das drittletzte Element und alles davor |
-n+3 | Nur die letzten 3 Elemente |
Version
Syntax
CSS :nth-last-child Syntax
selector:nth-last-child() {
css declarations;
}Beispiel des :nth-last-child()-Selektors:
CSS :nth-last-child Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(1) {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Hier wählt p:nth-last-child(1) den Absatz aus, der das letzte Kind seines Elternelements ist, sodass nur der zweite Absatz den blauen Hintergrund erhält.
Beispiel der Schlüsselwörter „odd" und „even":
CSS :nth-last-child Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-child(odd) {
background: #1c87c9;
color: #eee;
}
p:nth-last-child(even) {
background: #666;
color: #eee;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Vom Ende her gezählt steht Paragraph 3 an Position 1 (ungerade), Paragraph 2 an Position 2 (gerade) und Paragraph 1 an Position 3 (ungerade). Daher verwenden die Paragraphen 1 und 3 die odd-Regel und Paragraph 2 die even-Regel.
Beispiel von :nth-last-child() mit dem <table>-Tag:
Hinweis: Damit tr ausgewählt wird, muss es ein direktes Kind von tbody oder table sein.
CSS :nth-last-child Code-Beispiel mit table-Tag
<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid #8EBF41;
border-spacing: 10px;
font-family: sans-serif;
}
table tr {
background-color: #cccccc;
}
/* Selects the last three elements */
tr:nth-last-child(-n+3) {
background-color: #8EBF41;
}
table tr td {
padding: 10px;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n+2) {
color: #ffffff;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 900;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<table>
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
</body>
</html>Beispiel von :nth-last-child() mit dem <li>-Tag:
CSS :nth-last-child Code-Beispiel mit ul-Tag
<!DOCTYPE html>
<html>
<head>
<style>
/* Selects the last three list items */
li:nth-last-child(-n+3),
li:nth-last-child(-n+3) ~ li {
color: #8EBF41;
}
</style>
</head>
<body>
<h2>:nth-last-child selector example</h2>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
</ol>
<ol>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
<li>List Item Five</li>
<li>List Item Six</li>
</ol>
</body>
</html>Beachten Sie, dass li:nth-last-child(-n+3) mit dem allgemeinen Geschwister-Selektor (~ li) kombiniert wird, damit die letzten drei Listenelemente browser-übergreifend zuverlässig hervorgehoben werden. In der zweiten Liste (sechs Elemente) werden die letzten drei — „Four", „Five" und „Six" — grün dargestellt.
Verwandte Selektoren
:nth-child()— dasselbe Konzept, aber vom ersten Geschwisterelement an gezählt.:nth-of-type()— zählt nur Geschwister desselben Elementtyps, vom Anfang.:nth-last-of-type()— zählt gleichartige Geschwister vom Ende.:last-child— eine Kurzform, die:nth-last-child(1)entspricht.