Kind-Selektor
Lektion 7 von 15 im Kurs CSS Selectors von Coddy.
Ein Kind-Selektor ist eine Art von CSS-Selektor, der alle Elemente auswählt, die direkte Kinder eines bestimmten Elements sind. Der Kind-Selektor wird durch ein Größer-als-Zeichen (>) zwischen zwei Selektoren gekennzeichnet.
Beispiel:
Betrachten Sie die folgende HTML-Struktur:
<div class="parent">
<p>This is a direct child paragraph.</p>
<div>
<p>This is an indirect child paragraph.</p>
</div>
</div>Um den direkten Kind-Absatz anzusprechen, würden Sie den Kind-Kombinator wie folgt verwenden:
.parent > p {
color: blue;
}In diesem Beispiel wird nur der direkte Kind-Absatz blau gefärbt, nicht derjenige, der innerhalb des inneren <div> verschachtelt ist.
Kind-Selektoren können auch verwendet werden, um das Styling von Elementen zu vermeiden, die keine direkten Kinder eines bestimmten Elements sind. Zum Beispiel könnten Sie einen Kind-Selektor verwenden, um alle Links, die direkte Kinder eines p-Elements sind, rot zu gestalten.
Aufgabe
EinfachErstellen Sie für die folgende HTML-Struktur eine CSS-Regel unter Verwendung des Kind-Kombinators, um die direkten Listenelemente innerhalb des <ul>-Elements so zu gestalten, dass sie eine Hintergrundfarbe von "yellow" haben.
Probier es selbst
<html>
<head>
<title>Child Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<ul class="list">
<li>This is a direct list item.</li>
<div>
<li>This is an indirect list item.</li>
</div>
</ul>
</body>
</html>Alle Lektionen in CSS Selectors
3Kombinator-Selektoren
Kind-SelektorNachfahren-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-Selektor