:nth-last-child

Der Selektor :nth-last-child ermöglicht es Ihnen, ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge gemäß einer Formel auszuwählen. Er ist in der CSS Selectors Level 3 Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er zur Gestaltung von Inhalten basierend auf ihrer Beziehung zu übergeordneten Elementen und Geschwisterelementen verwendet wird. Er funktioniert genauso wie :nth-child, außer dass er Elemente vom Ende der Quellreihenfolge aus auswählt, nicht vom Anfang.

Angenommen, wir haben eine Liste mit einer unbekannten Anzahl von Elementen 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 beispielsweise eine Klasse zum Listenelement hinzuzufügen (z. B. .highlight), können wir :nth-last-child verwenden.

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

Wie Sie sehen können, akzeptiert :nth-last-child 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 übereinstimmende Elemente aus – ähnlich wie beim Navigieren von Elementen in einem Array in JavaScript. Die Schlüsselwörter „even“ und „odd“ sind einfach (2, 4, 6 usw. bzw. 1, 3, 5). 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.

Zur weiteren Veranschaulichung sind hier einige Beispiele für gültige :nth-last-of-type-Selektoren

Check out this Pen!

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

• CSS-Tricks Tester
• Leas Verou Tester

Interessante Punkte

• :nth-last-child durchläuft Elemente, beginnend am Ende der Quellreihenfolge. Der einzige Unterschied zu :nth-child besteht darin, dass letzteres Elemente durchläuft, *beginnend am Anfang der Quellreihenfolge*.
• Der Selektor :nth-last-child ist dem :nth-last-of-type sehr ähnlich, aber mit einem **entscheidenden Unterschied:** Er ist weniger spezifisch. In unserem obigen Beispiel würden sie dasselbe Ergebnis liefern, da wir nur li-Elemente durchlaufen. Wenn wir jedoch eine komplexere Gruppe von Geschwistern durchlaufen würden, würde :nth-last-child versuchen, alle Geschwister abzugleichen, nicht nur Geschwister vom selben Elementtyp. Dies zeigt die Leistungsfähigkeit von :nth-last-child – es kann jedes Geschwisterelement in einer Anordnung auswählen, *nicht nur Elemente, die vor dem Doppelpunkt angegeben sind*.

Verwandte Eigenschaften

• nth-child
• nth-last-of-type
• nth-of-type
• 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-child wurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass ältere 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, verwenden Sie entweder ein Polyfill für IE oder verwenden Sie diese Selektoren auf nicht-kritische Weise im Sinne von progressive enhancement, was empfohlen wird.