Desen Gücü: nth-child Kullanımı

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

:nth-child() sözde sınıfı, bir ebeveyn içindeki sıralarına göre öğeleri seçer ve hangilerinin seçileceğini belirlemek için bir sayı veya bir desen kullanır.

Örneğin, bir listemiz var:

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

Çift numaralı liste öğelerini şu şekilde seçeriz:

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

3. öğeyi şu şekilde seçeriz:

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

Her 5. öğeyi şu şekilde seçeriz:

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

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.

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

Her üçüncü <div> öğesine sarı bir arka plan vermek için :nth-child() kullanarak bir CSS kuralı oluşturun.

Kopya kağıdı

:nth-child() sözde sınıfı, öğeleri bir ebeveyn içindeki sıralarına göre seçer.

Çift numaralı öğeleri seçin:

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

Belirli bir öğeyi seçin (3.):

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

Her n. öğeyi seçin (her 5.):

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

Kendin dene

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

Kendini test et

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