Muster-Power: nth-child nutzen

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

Die Pseudoklasse :nth-child() wählt Elemente basierend auf ihrer Reihenfolge innerhalb eines Elternelements aus, wobei eine Zahl oder ein Muster verwendet wird, um zu bestimmen, welche ausgewählt werden.

Zum Beispiel haben wir eine Liste:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

So wählen wir geradzahlige Listenelemente aus:

li:nth-child(even) {
  background-color: lightblue;
}

So wählen wir das 3. Element aus:

li:nth-child(3) {
  font-weight: bold;
}

So wählen wir jedes 5. Element aus:

li:nth-child(5n) {
  color: red;
}

Aufgabe

Einfach

Erstelle eine CSS-Regel unter Verwendung von :nth-child(), um jedem dritten <div> einen Hintergrund in "yellow" zu geben.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Power: Using nth-child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</body>
</html>