: n-tes Typ - CSS-Tricks

Mit dem :nth-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.

Angenommen, wir haben eine ungeordnete Liste und möchten abwechselnd Listenelemente mit Zebrastreifen versehen:

First Item
Second Item
Third Item
Fourth Item
Fifth Item

Anstatt jedem Listenelement (z. B. .even& .odd) Klassen hinzuzufügen, können wir Folgendes verwenden :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Wie Sie sehen können, :nth-of-typewird ein Argument verwendet: Dies kann eine einzelne Ganzzahl, die Schlüsselwörter "gerade" oder "ungerade" oder eine Formel wie oben gezeigt 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, aber 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-of-typeSelektoren aufgeführt:

Schauen Sie sich diesen Stift an!

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

• CSS-Tricks Tester
• Lea Verous Tester

Sehenswürdigkeiten

• :nth-of-typeiteriert durch Elemente, die am Anfang der Quellreihenfolge beginnen. Der einzige Unterschied :nth-last-of-typebesteht darin, dass letztere Elemente durchlaufen, die am Ende der Quellreihenfolge beginnen.
• Der :nth-of-typeSelektor ist sehr ähnlich, :nth-childaber mit einem entscheidenden Unterschied: Er ist spezifischer. 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-childwürden , würden wir versuchen, alle Geschwister zu finden, nicht nur Geschwister desselben Elementtyps. Dies zeigt die Kraft, mit der :nth-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-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.