CSS :nth-child() 伪类

定义和用法

CSS :nth-child(n)}} Pseudo-Klassen, um Elemente zu matchen, die als Kind des n Elementen

Diese Pseudo-Klasse matcht Elemente basierend auf dem Index des Elements in der Liste der Kinder des Elternelements.

n kann eine Zahl/Indiz, ein Schlüsselwort (ungerade oder gerade) oder einer Formel (wie an + b)

Tipp:Ansehen :nth-of-type() Pseudo-Klassen, um Elemente zu wählen, die als Kind ihres Elternelements sinddesselben Typs (Tagname)der n Elementen, die als Kind eines Elements auftreten.

Beispiel

Beispiel 1

Wie man sie verwendet :nth-child() Pseudo-Klassen:

/* Wählen Sie jedes vierte Element in jeder Brüdergruppe */
:nth-child(4) {
  background-color: yellow;
}
/* Wählen Sie das zweite Element in den Div-Brüdern */
div:nth-child(2) {
  background-color: red;
}
/* Wählen Sie den zweiten li-Element in der Liste */
li:nth-child(2) {
  background-color: lightgreen;
}

Versuchen Sie es selbst

Beispiel 2

ungerade und gerade ist ein Schlüsselwort, das verwendet werden kann, um Elemente mit ungerader oder gerader Index zu matchen (der Index des ersten Elements ist 1).

Hier weisen wir der Hintergrundfarbe für <p>-Elemente mit ungerader und gerader Index zu:

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie die Formel (an + b) Beschreibung:a stellt einen ganzzahligen Schritt dar, n sind alle nichtnegativen Ganzzahlen, beginnend mit 0,b ist ein ganzzahliges Offset.

Hier weisen wir der Hintergrundfarbe für alle <p>-Elemente mit einem Index, der durch 3 teilbar ist, zu (dies wählt den dritten, sechsten, neunten usw. Element):

p:nth-child(3n+1) {
  background-color: red;
}

Versuchen Sie es selbst

Beispiel 4

Hier weisen wir der Hintergrundfarbe für alle <p>-Elemente mit einem Index, der durch 3 teilbar ist, zu. Dann subtrahieren wir 1 (dies wählt den ersten, vierten, siebten usw. Element):

p:nth-child(3n-1) {
  background-color: red;
}

Versuchen Sie es selbst

CSS-Syntax

:nth-child(index | ungerade | gerade | an+b) {
  css-Ausdrücke;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die den Pseudo-Klassen vollständig unterstützt.