CSS :nth-last-child-Pseudoklasse
Die :nth-last-child()-Pseudoklasse wählt Elemente basierend auf ihrem Index ab dem letzten Element nach oben aus.
Die :nth-last-child()-Pseudoklasse kann durch eine Zahl, ein Schlüsselwort oder eine Formel angegeben werden.
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.).
Funktionale Notation
<An+B>
Wählt Elemente aus, deren numerische Position dem Muster An+B entspricht (für jeden nicht-negativen ganzzahligen Wert von n). Der Index des ersten Elements ist 1, und n in der Formel beginnt bei 0. Die Werte A und B müssen ganzzahlig sein und können negativ sein. A definiert die Musterlänge, und B definiert den Versatz.
Version
Syntax
CSS :nth-last-child Syntax
selector:nth-last-child() {
css declarations;
}Beispiel für den :nth-last-child()-Selektor:
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>Beispiel für die Schlüsselwörter „odd“ und „even“:
CSS :nth-last-child Codebeispiel
<!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>Beispiel für :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 Codebeispiel 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 für :nth-last-child() mit dem <li>-Tag:
CSS :nth-last-child Codebeispiel 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>Practice
Was gilt über die nth-last-child-Pseudoklasse in CSS?