Nicht das erste Kind in CSS auswählen
-
Verwenden Sie den Selektor
:not(selector), um das erste Kind in CSS nicht auszuwählen -
Gestalten Sie das erste Kind individuell mit dem
:first-child-Selektor, um das erste Kind in CSS nicht auszuwählen
In diesem Artikel erfahren Sie, wie Sie CSS-Selektoren verwenden, um das erste Kind nicht auszuwählen.
Verwenden Sie den Selektor :not(selector), um das erste Kind in CSS nicht auszuwählen
Wir können den Selektor :not(selector) verwenden, um jedes andere Element auszuwählen, das nicht das ausgewählte Element ist. Wir können also den Selektor verwenden, um das erste Kind in CSS nicht auszuwählen. Wir können :first-child als Selektor im :not(selector)-Selektor verwenden. Auf diese Weise können wir Stile auf alle Nachkommen eines Elements mit Ausnahme des ersten anwenden. Hier, in Browsern mit CSS Selectors level 3 unterstützt werden, können wir den Selektor :not verwenden.
Erstellen Sie beispielsweise das Tag body in HTML. Schreiben Sie dann drei p-Tags und schreiben Sie einen Inhalt Ihrer Wahl zwischen die Tags. Wählen Sie in CSS body p:not(:first-child) und stellen Sie die color auf red.
Hier, im Snippet unten, können wir sehen, dass der Hauptteil Absätze enthält und alle mit Ausnahme des ersten die Schriftfarbe Rot haben. Somit können wir alle untergeordneten Elemente außer dem ersten untergeordneten Element auswählen und Stile anwenden. Der Selektor :not hat jedoch gewisse Einschränkungen (z. B. kann er nur einfache Selektoren als Argument verarbeiten).
Code-Beispiel:
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
body p:not(:first-child) {
color: red;
}
Gestalten Sie das erste Kind individuell mit dem :first-child-Selektor, um das erste Kind in CSS nicht auszuwählen
Wir können mit dem Selektor :first-child spezifische Regeln festlegen, die die zuvor festgelegte Regel außer Kraft setzen. Mit dieser Technik können wir alle Kinder außer dem ersten Kind stylen. Wenn Sie die Stile mit dem :first-child-Selektor überschreiben, wird das erste untergeordnete Element anders als die anderen untergeordneten Elemente angezeigt.
Verwenden Sie beispielsweise dieselbe HTML-Struktur wie in der ersten Methode. Wählen Sie in CSS das p-Tag aus und stellen Sie color auf blau. Als nächstes wählen Sie das erste Kind als body p:first-child und stellen dann die color auf black.
Hier ist der Standardstil für die Absätze außer dem ersten auf color: blue gesetzt, während er mit color: black mit dem :first-child-Selektor überschrieben wird. Daher können wir den Selektor :first-child verwenden, um das erste Kind nicht auszuwählen.
Code-Beispiel:
p{
color:blue;
}
body p:first-child {
color: black;
}
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
