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.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

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

Spickzettel

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

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

Sie können :first-child mit anderen Selektoren kombinieren, um eine spezifischere Auswahl zu treffen:

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

Dies wählt das erste div-Element unter seinen Geschwistern aus und spricht dann das h1-Tag darin an.

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.