CSS :nth-last-of-type() Pseudo-Klasse
Die Pseudo-Klasse :nth-last-of-type() wählt Elemente anhand ihres Index aus, beginnend beim letzten Element und nach oben gezählt.
Die :nth-last-of-type() kann durch eine Zahl, ein Schlüsselwort oder eine Formel angegeben werden.
| Wert | Beschreibung |
|---|---|
number | Entspricht dem exakten n-ten Element vom Ende. |
odd / even | Entspricht Elementen an ungeraden oder geraden Positionen vom Ende. |
an + b | Entspricht Elementen an Positionen, die mit der Formel an + b berechnet werden, wobei a und b ganze Zahlen sind und n ein Zähler ist, der bei 0 beginnt. |
Die Pseudo-Klasse :nth-last-of-type() ähnelt :nth-of-type(), aber es gibt einen Unterschied: Sie zählt die Elemente vom Ende, während :nth-of-type() sie vom Anfang zählt.
Diese Pseudo-Klasse ähnelt auch :nth-last-child, unterscheidet sich jedoch darin, was sie auswählt: :nth-last-of-type() zielt auf einen bestimmten Elementtyp unter seinen Geschwistern ab, während :nth-last-child() jeden Elementtyp an der angegebenen Position auswählt. Beide haben dieselbe Spezifität.
Version
Syntax
CSS :nth-last-of-type() syntax
:nth-last-of-type( <nth> ) {
css declarations;
}Example of the :nth-last-of-type() pseudo-class:
CSS :nth-last-of-type() code example
<!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>Example of the :nth-last-of-type() pseudo-class with "odd" and "even":
CSS :nth-last-of-type() another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-last-child(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>Example of the :nth-last-of-type() pseudo class with a formula (an + b):
HTML/CSS Example of the :nth-last-of-type() pseudo class with a formula (an + b)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-last-of-type(3n+0) {
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 eight paragraph.</p>
<p>The ninth paragraph.</p>
</body>
</html>Practice
What is the function of the :nth-last-of-type CSS pseudo-class?