Memilih Anak Pertama

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 13 dari 43.

pseudo-class :first-child menargetkan elemen pertama di antara sekelompok elemen saudara.

Contohnya:

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

Setiap paragraf yang merupakan elemen anak pertama di dalam induknya akan berwarna biru dan memiliki teks tebal.

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

Kamu dapat menggabungkan dan menerapkan selector descendant, child, dan selector lainnya untuk menargetkan elemen dengan lebih spesifik. Berikut contoh lainnya:

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

Ini memilih elemen div pertama di antara elemen saudara, lalu mengubah warna teks tag <h1> di dalamnya menjadi merah.

Tantangan

Mudah

Buat aturan CSS yang menargetkan item daftar pertama (<li>) dalam daftar tidak berurutan mana pun (<ul>) dan memberinya gaya berikut:

Warna teks biru
Warna latar belakang kuning muda
Padding kiri 10 piksel

Coba sendiri

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