İlk Çocuğu Hedefleme

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 13 / 43.

:first-child sözde sınıfı, bir grup kardeş öğe arasındaki ilk öğeyi hedefler.

Örneğin:

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

Ebeveyninin içindeki ilk alt öğe olan herhangi bir paragraf mavi renkte ve kalın metinli olacaktır.

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

Öğeleri daha spesifik bir şekilde hedeflemek için alt öğe, çocuk ve diğer seçicileri birleştirebilir ve uygulayabilirsiniz. İşte başka bir örnek:

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

Bu, kardeşleri arasındaki ilk div öğesini seçer ve ardından içindeki <h1> etiketinin metin rengini kırmızıya değiştirir.

Görev

Kolay

Herhangi bir sırasız listedeki (<ul>) ilk liste öğesini (<li>) hedefleyen ve onu şu şekilde stillendiren bir CSS kuralı oluşturun:

Mavi metin rengi
Açık sarı arka plan rengi
10 piksellik sol iç boşluk

Kendin dene

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