Mit dem :nth-last-of-typeSelektor können Sie ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge gemäß einer Formel auswählen. Es wird in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert. Dies bedeutet, dass es zum Formatieren von Inhalten basierend auf seiner Beziehung zu übergeordneten und Geschwisterelementen verwendet wird. Es funktioniert genauso wie, :nth-of-typeaußer dass Elemente ausgewählt werden, die am unteren Rand der Quellreihenfolge beginnen, nicht am oberen Rand.
Angenommen, wir haben eine ungeordnete Liste und möchten das vorletzte Element hervorheben (in diesem genauen Beispiel das „vierte Element“):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Anstatt dem Listenelement (z. B. .highlight) eine Klasse hinzuzufügen, können wir Folgendes verwenden :nth-last-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Wie Sie sehen können, :nth-last-of-typewird ein Argument verwendet: Dies kann eine einzelne Ganzzahl, die Schlüsselwörter "gerade" oder "ungerade" oder eine Formel sein. Wenn eine Ganzzahl angegeben wird, wird nur ein Element ausgewählt. Die Schlüsselwörter oder eine Formel durchlaufen jedoch alle untergeordneten Elemente des übergeordneten Elements und wählen übereinstimmende Elemente aus - ähnlich wie beim Navigieren in Elementen in einem Array in JavaScript. Die Schlüsselwörter "gerade" und "ungerade" sind unkompliziert (2, 4, 6 usw. bzw. 1, 3, 5 usw.). Die Formel wird unter Verwendung der folgenden Syntax erstellt an+b:
- "A" ist ein ganzzahliger Wert
- "N" ist der wörtliche Buchstabe "n"
- "+" Ist ein Operator und kann entweder "+" oder "-" sein.
- "B" ist eine Ganzzahl und wird benötigt, 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 "n" -Teil der Formel repräsentiert, falls enthalten, eine Menge zunehmender positiver Ganzzahlen (genau wie das Durchlaufen eines Arrays). In unserem obigen Beispiel haben wir jedes zweite Element mit der Formel ausgewählt 2n, was funktioniert hat, da 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.). Lesen Sie diesen Artikel, um eine ausführlichere Erklärung der Mathematik zu erhalten.
Zur weiteren Veranschaulichung sind hier einige Beispiele für gültige :nth-last-of-typeSelektoren aufgeführt:
Siehe die Pen CSS-Tricks :: n-last-of-type von Chris Coyier (@chriscoyier) auf CodePen.
Glücklicherweise müssen Sie nicht immer selbst rechnen - es gibt mehrere :nth-last-of-typeTester und Generatoren:
- CSS-Tricks Tester
- Lea Verous Tester
Sehenswürdigkeiten
:nth-last-of-typeiteriert durch Elemente, die am Ende der Quellreihenfolge beginnen. Der einzige Unterschied:nth-of-typebesteht darin, dass letztere Elemente durchlaufen, die am Ende der Quellreihenfolge beginnen.- Der
:nth-last-of-typeSelektor ist sehr ähnlich,:nth-last-childaber mit einem entscheidenden Unterschied: Er ist spezifischer. In unserem obigen Beispiel würden sie das gleiche Ergebnis erzielen, da wir nur überliElemente iterieren. Wenn wir jedoch über eine komplexere Gruppe von Geschwistern iterieren:nth-last-childwürden , würden wir versuchen, alle Geschwister zu finden, nicht nur Geschwister desselben Elementtyps. Dies zeigt die Kraft, mit der:nth-last-of-typees auf einen bestimmten Elementtyp in einer Anordnung in Bezug auf ähnliche Geschwister abzielt, nicht auf alle Geschwister.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | 3.2+ | Funktioniert | 9,5+ | 9+ | Funktioniert | Funktioniert |
:nth-last-of-typewurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Versionen von Browsern dies nicht unterstützen. Die moderne Browserunterstützung ist jedoch einwandfrei, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen verwendet. Wenn Sie ältere Browserunterstützung benötigen, entweder Polyfill für IE, oder verwenden Sie diese Selektoren auf unkritische Weise á la progressive Verbesserung, was empfohlen wird.