Son Çocuğu Hedefleme

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

:last-child sözde sınıfı, ebeveynlerinin son çocuğu olan öğeleri seçer.

Örneğin:

<div class="parent">
  <p>First paragraph</p>
  <p>Middle paragraph</p>
  <p>Last paragraph</p>
</div>

Yalnızca son paragrafı stillendirmek için :last-child sözde sınıfını kullanın:

p:last-child {
  color: red;
  font-weight: bold;
}

Bu CSS uygulandıktan sonra, sadece "Last paragraph" kırmızı ve kalın olacaktır çünkü o, üst div'in (parent div) son çocuğudur (last child).

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 paragraf grubundaki son <p> öğesini stillendirmek için bir CSS kuralı oluşturun.

Onu mavi arka plan rengi (#046ae0) ve white metin ile stillendirin.
Son paragrafın yazı tipi kalınlığını (font weight) bold olarak ayarlayın.

Kopya kağıdı

:last-child sözde sınıfı, ebeveynlerinin son çocuğu olan öğeleri seçer:

p:last-child {
  color: red;
  font-weight: bold;
}

Bu, ebeveyn kapsayıcısı içindeki yalnızca son paragraf öğesini stillendirecektir.

Kendin dene

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the Last Child</title>
  <style>
    /* Write your CSS rule here */

  </style>
</head>
<body>
    <div> 
        <h2>Exploring the Universe</h2>
        <p>The universe is vast, with countless stars and galaxies waiting to be discovered.</p>
        <p>New technologies allow us to explore deeper into space, revealing its many secrets.</p>
        <p>We continue to learn more about distant planets and the possibility of life beyond Earth.</p> 
    </div>
    <div>
        <h2>The Deep Ocean</h2>
        <p>Our oceans are mysterious, covering most of Earth, yet we know so little about them.</p>
        <p>Many species live in extreme conditions, some of which are still being discovered today.</p>
        <p>Exploring the ocean depths gives us insights into life at the planet's most remote locations.</p> 
    </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.