Il potere degli schemi: usare nth-child

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 15 di 43.

La pseudo-classe :nth-child() seleziona gli elementi in base alla loro posizione all'interno di un elemento genitore, usando un numero o uno schema per scegliere quali.

Ad esempio, abbiamo un elenco:

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

Ecco come selezioniamo gli elementi pari dell’elenco:

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

Ecco come selezioniamo il 3° elemento:

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

Ecco come selezioniamo ogni 5° elemento:

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

Sfida

Facile

Crea una regola CSS usando :nth-child() per dare uno sfondo giallo a ogni terzo <div>.

Provalo tu

<!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>