Selezionare il primo figlio

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

La pseudo-classe :first-child seleziona il primo elemento di un gruppo di elementi fratelli.

Per esempio:

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

Qualsiasi paragrafo che è il primo elemento figlio del suo genitore sarà colorato di blu e avrà il testo in grassetto.

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

Puoi combinare e applicare selettori di discendenza, figli e altri selettori per individuare gli elementi in modo più specifico. Ecco un altro esempio:

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

Questo seleziona il primo elemento div tra i suoi elementi fratelli e poi cambia il colore del testo del tag <h1> al suo interno in rosso.

Sfida

Facile

Crea una regola CSS che selezioni il primo elemento dell’elenco (<li>) in qualsiasi elenco non ordinato (<ul>) e gli applichi questi stili:

Colore del testo blu
Colore di sfondo giallo chiaro
Padding a sinistra di 10 pixel

Provalo tu

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