: n-tes letztes Kind - CSS-Tricks

Anonim

Mit dem :nth-last-childSelektor 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-childaußer dass Elemente ausgewählt werden, die am unteren Rand der Quellreihenfolge beginnen, nicht am oberen Rand.

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“):



    

  • 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-child:

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

Wie Sie sehen können, :nth-last-childwird 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). 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:

Schauen Sie sich diesen Stift an!

Glücklicherweise müssen Sie nicht immer selbst rechnen - es gibt mehrere :nth-last-childTester und Generatoren:

  • CSS-Tricks Tester
  • Lea Verous Tester

Sehenswürdigkeiten

  • :nth-last-childiteriert durch Elemente, die am Ende der Quellreihenfolge beginnen. Der einzige Unterschied :nth-childbesteht darin, dass letztere Elemente durchlaufen, die am Anfang der Quellreihenfolge beginnen.
  • Der :nth-last-childSelektor ist sehr ähnlich, :nth-last-of-typeaber mit einem entscheidenden Unterschied: Er ist weniger spezifisch. In unserem obigen Beispiel würden sie das gleiche Ergebnis erzielen, da wir nur über liElemente 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 Macht von :nth-last-child-it kann jedes Geschwisterelement in einer Anordnung auswählen, nicht nur Elemente, die vor dem Doppelpunkt angegeben sind.

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Funktioniert 3.2+ Funktioniert 9,5+ 9+ Funktioniert Funktioniert

:nth-last-childwurde 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.