: n-tes Kind - CSS-Tricks

Mit dem :nth-childSelektor können Sie ein oder mehrere Elemente basierend auf ihrer Quellreihenfolge gemäß einer Formel auswählen.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

Es wird in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert, dh es wird verwendet, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterelementen zu formatieren.

Angenommen, wir erstellen ein CSS-Raster und möchten den Rand jedes vierten Rastermoduls entfernen. Hier ist das HTML:

 One Two Three Four Five 

Anstatt jedem vierten Element (z. B. .last) eine Klasse hinzuzufügen , können wir Folgendes verwenden :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

Der :nth-childSelektor ein Argument: Dies ist eine einzelne ganze Zahl sein kann, die Schlüsselwörter even, oddoder eine Formel. 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 JavaScript-Array. 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 vierte Element mit der Formel ausgewählt 4n, was funktioniert hat, da jedes Mal, wenn ein Element überprüft wurde, "n" um eins erhöht wurde (4 × 0, 4 × 1, 4 × 2, 4 × 3 usw.). Wenn die Reihenfolge eines Elements mit dem Ergebnis der Gleichung übereinstimmt, wird es ausgewählt (4, 8, 12 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-childSelektoren aufgeführt:

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

• CSS-Tricks Tester
• Lea Verous Tester

: n-tes Kind (an + b von)

Es gibt einen wenig bekannten Filter, der :nth-childgemäß der CSS-Selektorspezifikation hinzugefügt werden kann : Die Möglichkeit, die :nth-childeiner Teilmenge von Elementen mithilfe des of Formats auszuwählen . Angenommen, Sie haben eine Liste mit gemischten Inhalten: Einige haben die Klasse .video, andere die Klasse .picture, und Sie möchten die ersten drei Bilder auswählen. Sie können dies mit dem Filter "of" wie folgt tun:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Beachten Sie, dass sich dies vom Anhängen eines Selektors direkt an den :nth-childSelektor unterscheidet:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Dies kann etwas verwirrend sein, daher kann ein Beispiel den Unterschied veranschaulichen:

Die Browserunterstützung für den Filter "of" ist sehr begrenzt: Zum jetzigen Zeitpunkt unterstützte nur Safari die Syntax. Um den Status Ihres bevorzugten Browsers zu überprüfen, sind folgende Probleme offen :nth-child(an+b of s):

• Firefox: Unterstützung für das n-te Kind (An + B von sel)
• Chrome: Implementiere: n-tes Kind (an + b von S)

Sehenswürdigkeiten

• :nth-childiteriert durch Elemente, die am Anfang der Quellreihenfolge beginnen. Der einzige Unterschied :nth-last-childbesteht darin, dass letztere Elemente durchlaufen, die am Ende der Quellreihenfolge beginnen.
• Die Syntax zur Auswahl der ersten nAnzahl von Elementen ist etwas kontraintuitiv. Sie beginnen mit -nplus der positiven Anzahl von Elementen, die Sie auswählen möchten. Zum Beispiel li:nth-child(-n+3)werden die ersten 3 liElemente ausgewählt.
• Der :nth-childSelektor ist sehr ähnlich, :nth-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 .moduleElemente 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 Macht von :nth-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
Irgendein	3.2+	Irgendein	9,5+	9+	Irgendein	Irgendein

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