Das erste Kind-Element ansprechen

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 13 von 43.

Die Pseudoklasse :first-child spricht das erste Element innerhalb einer Gruppe von Geschwisterelementen an.

Zum Beispiel:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

Jeder Absatz, der das erste Kindelement innerhalb seines Elternelements ist, wird blau gefärbt und hat fettgedruckten Text.

p:first-child {
  color: blue;
  font-weight: bold;
}

Sie können Nachfahren-, Kind- und andere Selektoren kombinieren und anwenden, um Elemente gezielter anzusprechen. Hier ist ein weiteres Beispiel:

div:first-child h1 {
 color: red;
}

Dies wählt das erste div-Element unter seinen Geschwisterelementen aus und ändert dann die Textfarbe des darin enthaltenen <h1>-Tags in Rot.

Aufgabe

Einfach

Erstellen Sie eine CSS-Regel, die das erste Listen-Element (<li>) in jeder ungeordneten Liste (<ul>) anspricht und es wie folgt gestaltet:

Textfarbe blue
Eine Hintergrundfarbe von lightyellow
Ein linker Innenabstand von 10 Pixeln

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>