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;
}

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.

Teste dich selbst

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

Aufgabe

Einfach

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

Spickzettel

Die Pseudoklasse :nth-child() wählt Elemente basierend auf ihrer Reihenfolge innerhalb eines Elternelements aus.

Geradzahlige Elemente auswählen:

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

Ein bestimmtes Element auswählen (3.):

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

Jedes n-te Element auswählen (jedes 5.):

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

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>

Teste dich selbst

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