:nth-last-child()
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die :nth-last-child()
CSS Pseudoklasse wählt Elemente basierend auf ihrer Position innerhalb einer Gruppe von Geschwistern aus, wobei von hinten gezählt wird.
Probieren Sie es aus
Syntax
Die nth-last-child
-Pseudoklasse wird mit einem einzigen Argument angegeben, das das Muster für die Auswahl von Elementen repräsentiert, wobei von hinten gezählt wird.
:nth-last-child(<nth> [of <complex-selector-list>]?) {
/* ... */
}
Schlüsselwort-Werte
Funktionale Notation
<An+B>
-
Repräsentiert Elemente, deren numerische Position in einer Serie von Geschwistern dem Muster
An+B
entspricht, für jeden positiven ganzzahligen oder null-Wert vonn
, wobei:A
eine ganzzahlige Schrittweite ist,B
ein ganzzahliger Versatz ist,n
alle nichtnegativen Ganzzahlen sind, beginnend bei 0.
Dies kann als das
An+B
-te Element einer Liste gelesen werden. Der Index des ersten Elements, gezählt von hinten, ist1
. SowohlA
als auchB
müssen<integer>
-Werte haben.
Die of <selector>
-Syntax
Indem Sie ein Selektoren-Argument übergeben, können Sie das n-letzte Element auswählen, das zu diesem Selektor passt. Zum Beispiel wählt der folgende Selektor die letzten drei wichtigen Listenelemente aus, die mit class="important"
versehen sind.
:nth-last-child(-n + 3 of li.important) {
}
Hinweis: Dies unterscheidet sich davon, den Selektor außerhalb der Funktion zu platzieren, wie hier:
li.important: nth-last-child(-n + 3);
Dieser Selektor wendet einen Stil auf Listenelemente an, wenn diese auch innerhalb der letzten drei Kinder sind.
Beispiele
Beispielselektoren
tr:nth-last-child(odd)
odertr:nth-last-child(2n+1)
-
Repräsentiert die ungeraden Zeilen einer HTML-Tabelle: 1, 3, 5 usw., wobei von hinten gezählt wird.
tr:nth-last-child(even)
odertr:nth-last-child(2n)
-
Repräsentiert die geraden Zeilen einer HTML-Tabelle: 2, 4, 6 usw., wobei von hinten gezählt wird.
:nth-last-child(7)
-
Repräsentiert das siebte Element, gezählt von hinten.
:nth-last-child(5n)
-
Repräsentiert die Elemente 5, 10, 15 usw., wobei von hinten gezählt wird.
:nth-last-child(3n+4)
-
Repräsentiert die Elemente 4, 7, 10, 13 usw., wobei von hinten gezählt wird.
:nth-last-child(-n+3)
-
Repräsentiert die letzten drei Elemente innerhalb einer Gruppe von Geschwistern.
p:nth-last-child(n)
oderp:nth-last-child(n+1)
-
Repräsentiert jedes
<p>
-Element innerhalb einer Gruppe von Geschwistern. Dies ist gleichbedeutend mit einem einfachenp
-Selektor. (Dan
bei null beginnt und währenddessen das letzte Element bei eins startet, werdenn
undn+1
dieselben Elemente auswählen.) p:nth-last-child(1)
oderp:nth-last-child(0n+1)
-
Repräsentiert jedes
<p>
, das das erste Element innerhalb einer Gruppe von Geschwistern ist, wobei von hinten gezählt wird. Dies ist gleichbedeutend mit dem:last-child
-Selektor.
Tabellenbeispiel
HTML
<table>
<tbody>
<tr>
<td>First line</td>
</tr>
<tr>
<td>Second line</td>
</tr>
<tr>
<td>Third line</td>
</tr>
<tr>
<td>Fourth line</td>
</tr>
<tr>
<td>Fifth line</td>
</tr>
</tbody>
</table>
CSS
table {
border: 1px solid blue;
}
/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
background-color: pink;
}
/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
color: blue;
}
/* Select only the last second element */
tr:nth-last-child(2) {
font-weight: 600;
}
Ergebnis
Mengenabfrage
Eine Mengenabfrage gestaltet Elemente abhängig davon, wie viele es davon gibt. In diesem Beispiel werden Listenelemente rot gefärbt, wenn es mindestens drei davon in einer Liste gibt. Dies wird durch die Kombination der Möglichkeiten der nth-last-child
-Pseudoklasse und des Darauffolgenden-Geschwisterkombinators erreicht.
HTML
<h4>A list of four items (styled):</h4>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<h4>A list of two items (unstyled):</h4>
<ol>
<li>One</li>
<li>Two</li>
</ol>
CSS
/* If there are at least three list items,
style them all */
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
color: red;
}
Ergebnis
of <selector>
-Syntaxbeispiel
In diesem Beispiel gibt es eine unsortierte Liste mit Namen. Einige Einträge haben die Klasse noted
und werden mit einer dicken unteren Begrenzung hervorgehoben.
HTML
<ul>
<li class="noted">Diego</li>
<li>Shilpa</li>
<li class="noted">Caterina</li>
<li>Jayla</li>
<li>Tyrone</li>
<li>Ricardo</li>
<li class="noted">Gila</li>
<li>Sienna</li>
<li>Titilayo</li>
<li class="noted">Lexi</li>
<li>Aylin</li>
<li>Leo</li>
<li>Leyla</li>
<li class="noted">Bruce</li>
<li>Aisha</li>
<li>Veronica</li>
<li class="noted">Kyouko</li>
<li>Shireen</li>
<li>Tanya</li>
<li class="noted">Marlene</li>
</ul>
CSS
* {
font-family: sans-serif;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
font-size: 1.2rem;
padding-left: 0;
}
li {
margin: 0.125rem;
padding: 0.25rem;
border: 1px solid tomato;
}
.noted {
border-bottom: 5px solid tomato;
}
Im folgenden CSS zielen wir auf die ungeraden Listenelemente ab, die mit class="noted"
gekennzeichnet sind.
li:nth-last-child(odd of .noted) {
background-color: tomato;
border-bottom-color: seagreen;
}
Ergebnis
Einträge mit class="noted"
haben eine dicke untere Begrenzung und die Einträge 1, 7, 14 und 20 haben einen durchgehenden Hintergrund, da sie die ungeraden Listenelemente mit class="noted"
sind.
Spezifikationen
Specification |
---|
Selectors Level 4 # nth-last-child-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:nth-last-child() | ||||||||||||
Matches elements with no parent | ||||||||||||
of <selector> syntax |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support