Den CSS-Selektor :nth-child() verstehen

Wie alle CSS-Selektoren können Sie :nth-child() verwenden, um Elemente auf einer Webseite zu identifizieren und Stile auf sie anzuwenden. Mit diesem Selektor können Sie jedoch eine Gruppe von Geschwistern basierend auf ihrer relativen Position eingrenzen.

Der Selektor unterstützt einige grundlegende Schlüsselwörter für häufige Fälle, bietet aber auch eine leistungsstarke Mustervergleichssyntax. Damit können Sie je nach Bedarf Elemente basierend auf regelmäßigen, sich wiederholenden Mustern oder komplexeren Definitionen auswählen.

Die :nth-child()-Selektorsyntax

Als ein CSS-Pseudoklassenselektor:nth-child()-Syntax unterscheidet sich von anderen Selektoren. Es verwendet ein Argument als Muster für übereinstimmende Elemente in einer Menge von Geschwistern:

:nth-child(args) {
/*...*/
}

Das Hauptaugenmerk liegt auf den Argumenten in den Klammern. Diese Argumente definieren die Teilmenge der auszuwählenden Elemente.

Verwenden von Schlüsselwortwerten für häufige Fälle

Dieser Selektor kann zwei Schlüsselwortwerte aufnehmen: seltsam Und sogar. Sie sind besonders nützlich für Alternative Zeilen in einer Tabelle formatieren.

Eine einfache geordnete Liste ist ein weiteres gutes Beispiel für die Verwendung dieser Schlüsselwortwerte:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Verwendung der :n-tes Kind (ungerade) Mit dem Selektor können Sie die Farbe jedes alternativen Elements ändern:

:nth-child(odd) {
color: red;
}

Elemente beginnen bei Index 1, daher wird das erste Element rot angezeigt, dann das dritte und so weiter:

Funktionale Notation für mehr Flexibilität

Sie können eine einzelne Ganzzahl verwenden, um ein einzelnes Element wie folgt auszuwählen:

li:nth-child(4) {
color: red;
}

In diesem Fall stimmt der Selektor nur mit dem vierten Element in der Liste überein:

Diese Syntax ist ein Sonderfall der allgemeineren funktionalen Syntax, die Elemente auswählt, die einem bestimmten Muster entsprechen. Diese Syntax lautet:

:nth-child(An+B) {
/*...*/
}

In dieser Notation gilt A ist die Schrittgröße. Dies bedeutet, wie oft sich der Selektor bewegt, um das nächste Element auszuwählen. Sie können damit jedes zweite Element, jedes dritte Element usw. auswählen. B ist der Ausgangspunkt, an dem die Auswahl beginnt.

Nehmen Sie zum Beispiel das Argument 3n+1:

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

Dadurch beginnt die Auswahl beim ersten Element und wird danach mit jedem dritten Element fortgesetzt:

Vergleichen Sie dies mit dem Ausdruck 3n+2:

li:nth-child(3n+2) {
color:red;
}

Dadurch wird immer noch jedes dritte Element ausgewählt, aber jetzt beginnt es beim zweiten Element in der Liste:

Ein weiteres interessantes Beispiel ist :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Dieser wählt jedes Element (n) aus, beginnend mit dem dritten (+3). Es wird so aussehen:

Sie können auch die Subtraktion verwenden, um bestimmte Ergebnisse zu erzielen:

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

In diesem Beispiel wird immer noch jedes dritte Element ausgewählt, aber es beginnt mit „Minus zuerst“. Das bedeutet im Endeffekt, dass das zweite Element in der Liste ausgewählt wird, dann das fünfte und so weiter:

Das von Syntax

Sie können auch das Schlüsselwort verwenden von gefolgt von einem Wähler als Argument im Selektor :nth-child(). Mit dieser Syntax können Sie die möglichen Elemente eingrenzen, aus denen das reguläre Muster auswählt.

Stellen Sie sich zum Beispiel vor, Ihr Markup wäre komplizierter als das Original:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Verwenden Sie nun :nth-child, um die geraden Elemente aus der Menge derjenigen mit einer bestimmten Klasse auszuwählen:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Beachten Sie, dass nur die fett gedruckten Elemente mit gerader Nummer rot sind:

Bedenken Sie auch, wie sich dies davon unterscheidet li.neu: n-tes Kind (gerade) das auf .new-Elemente abzielt, aber nur, wenn sie gerade sind. Im obigen Beispiel wären dies die Punkte 2 und 6.

Arbeiten mit dem :nth-child()-Selektor

Mit dem Selektor :nth-child() können Sie einzigartige Designs erzielen. Sie können farbenfrohe Websites erstellen und Zeilen und Spalten in Datentabellen hervorheben. Durch die Kombination mit anderen CSS-Selektoren können Sie komplexe Layouts und Designs erstellen.