Wybieranie pierwszego elementu potomnego

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 13 z 43.

Pseudoklasa :first-child wybiera pierwszy element z grupy elementów rodzeństwa.

Na przykład:

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

Każdy akapit, który jest pierwszym elementem potomnym swojego elementu nadrzędnego, będzie niebieski i pogrubiony.

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

Możesz łączyć i stosować selektory potomków, dzieci i inne, aby precyzyjniej wybierać elementy. Oto kolejny przykład:

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

Wybiera to pierwszy element div spośród jego elementów równorzędnych, a następnie zmienia kolor tekstu znacznika <h1> znajdującego się w nim na czerwony.

Wyzwanie

Łatwy

Utwórz regułę CSS, która wybiera pierwszy element listy (<li>) w dowolnej liście nieuporządkowanej (<ul>) i nadaje mu następujące style:

Niebieski kolor tekstu
Jasnożółty kolor tła
Lewe dopełnienie o szerokości 10 pikseli

Spróbuj swoich sił

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