İ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.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

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

Kopya kağıdı

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

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

Daha spesifik hedefleme için :first-child seçicisini diğer seçicilerle birleştirebilirsiniz:

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

Bu, kardeşleri arasındaki ilk div öğesini seçer ve ardından onun içindeki h1 etiketini hedefler.

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.