:nth-last-of-type

Der :nth-last-of-type Selektor ermöglicht es Ihnen, ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge nach einer Formel auszuwählen. Er ist in der CSS Selectors Level 3 Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er verwendet wird, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterelementen zu stylen. Er funktioniert genauso wie :nth-of-type, außer dass er Elemente von unten der Quellreihenfolge aus auswählt, nicht von oben.

Angenommen, wir haben eine ungeordnete Liste und möchten das vorletzte Element hervorheben (in diesem genauen Beispiel das „Vierte Element“)

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

Anstatt etwas wie das Hinzufügen einer Klasse zu einem Listenelement zu tun (z.B. .highlight), können wir :nth-last-of-type verwenden.

li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-of-type(2) {
  background: lightslategrey;
}

Wie Sie sehen, nimmt :nth-last-of-type ein Argument: dies kann eine einzelne Ganzzahl, die Schlüsselwörter „even“ (gerade) oder „odd“ (ungerade) oder eine Formel sein. Wenn eine Ganzzahl angegeben wird, wird nur ein Element ausgewählt – aber die Schlüsselwörter oder eine Formel durchlaufen alle Kinder des übergeordneten Elements und wählen passende Elemente aus – ähnlich wie beim Navigieren durch Elemente in einem Array in JavaScript. Die Schlüsselwörter „even“ und „odd“ sind einfach (2, 4, 6 usw. bzw. 1, 3, 5 usw.). Die Formel wird mit der Syntax an+b konstruiert, wobei

• „a“ ein ganzzahliger Wert ist
• „n“ der buchstäbliche Buchstabe „n“ ist
• „+“ ein Operator ist und entweder „+“ oder „-“ sein kann
• „b“ eine ganze Zahl ist und erforderlich ist, wenn ein Operator in der Formel enthalten ist

Es ist wichtig zu beachten, dass diese Formel eine Gleichung ist und jedes Geschwisterelement durchläuft, um zu bestimmen, welches ausgewählt wird. Der Teil „n“ der Formel, falls enthalten, repräsentiert eine Menge von aufsteigenden positiven ganzen Zahlen (genau wie beim Durchlaufen eines Arrays). In unserem obigen Beispiel haben wir jedes zweite Element mit der Formel 2n ausgewählt, was funktionierte, weil jedes Mal, wenn ein Element überprüft wurde, „n“ um eins erhöht wurde (2×0, 2×1, 2×2, 2×3 usw.). Wenn die Reihenfolge eines Elements mit dem Ergebnis der Gleichung übereinstimmt, wird es ausgewählt (2, 4, 6 usw.). Eine detailliertere Erklärung der beteiligten Mathematik finden Sie in diesem Artikel.

Um dies weiter zu veranschaulichen, hier einige Beispiele für gültige :nth-last-of-type Selektoren

Siehe den Pen CSS-Tricks: :nth-last-of-type von Chris Coyier (@chriscoyier) auf CodePen.

Glücklicherweise müssen Sie nicht immer die Mathematik selbst machen – es gibt mehrere :nth-last-of-type Tester und Generatoren da draußen.

• CSS-Tricks Tester
• Leas Verou Tester

Interessante Punkte

• :nth-last-of-type durchläuft Elemente beginnend vom Ende der Quellreihenfolge. Der einzige Unterschied zwischen ihm und :nth-of-type ist, dass letzterer Elemente beginnend vom Anfang der Quellreihenfolge durchläuft.
• Der :nth-last-of-type Selektor ist :nth-last-child sehr ähnlich, aber mit einem kritischen Unterschied: er ist spezifischer. In unserem obigen Beispiel würden sie dasselbe Ergebnis liefern, da wir nur li Elemente durchlaufen, aber wenn wir eine komplexere Gruppe von Geschwistern durchlaufen würden, würde :nth-last-child versuchen, alle Geschwister abzugleichen, nicht nur Geschwister des gleichen Elementtyps. Dies zeigt die Stärke von :nth-last-of-type – es zielt auf einen bestimmten Elementtyp in einer Anordnung in Bezug auf ähnliche Geschwister, nicht auf alle Geschwister.

Verwandte Eigenschaften

• nth-of-type
• nth-child
• nth-last-child
• first-of-type
• last-of-type

Weitere Ressourcen

• Mozilla Docs
• Artikel von QuirksMode
• Artikel von Sitepoint

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Funktioniert	3.2+	Funktioniert	9.5+	9+	Funktioniert	Funktioniert

:nth-last-of-type wurde im CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Browserversionen es nicht unterstützen. Die Unterstützung moderner Browser ist jedoch tadellos, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen eingesetzt. Wenn Sie ältere Browserunterstützung benötigen, können Sie entweder Polyfills für IE verwenden oder diese Selektoren auf nicht-kritische Weise im Sinne der progressiven Verbesserung nutzen, was empfohlen wird.