Home-theater-designers
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.
MUO-Video des Tages Scrollen Sie, um mit dem Inhalt fortzufahren
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 .
So erstellen Sie einen Screenshot auf einem HP-Laptop ohne Druckbildschirmtaste
Eine einfache geordnete Liste ist ein weiteres gutes Beispiel für die Verwendung dieser Schlüsselwortwerte:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</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:
wie finde ich die ip-adresse meines handys
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):
Sehen Sie sich kostenlose Filme ohne Downloads oder Anmeldungen an
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:
Die Syntax von
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>
<li class="old">Item 1</li>
<li class="new">Item 2</li>
<li class="new">Item 3</li>
<li class="old">Item 4</li>
<li class="new">Item 5</li>
<li class="new">Item 6</li>
<li class="new">Item 7</li>
</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(even of.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.new:nth-child(even) 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.