Skip to main content

B.6.5. First Child

Pada chapter ini kita akan membahas mengenai :fisrt-child. Pseudo-class :first-child diterapkan pada elemen yang merupakan anak pertama dari induknya (child element).

Contohnya teman-teman mempunyai banyak card dengan class yang sama yaitu .card di dalam website teman-teman, dan pada card yang merupakan anak pertama akan kita ubah warna judulnya menjadi blueviolet.

<div class="card-container">
  <div class="card">
    <h1>Example Card Title 1</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, enim?
    </p>
  </div>
  <!--- 7 more card... --->
</div>

Maka hasilnya akan terlihat seperti:

Output

Maka untuk menerapkan style seperti yang sudah di sebutkan di atas, teman-teman bisa memanfaatkan :first-child untuk membuat judul dari card yang merupakan elemen pertama atau urutan pertama menjadi berwarna blueviolet. Contoh penerapannya seperti berikut:

.card-container {
  /*.....*/
}

.card {
  /*.....*/
}

.card:first-child h1 {
  color: blueviolet;
}

Maka ketika teman-teman lihat lagi di web browser, hasilnya akan terlihat seperti:

Output

Ketika teman-teman coba untuk meng-copy seluruh card-container beserta isi di dalamnya (anak-anaknya) dan teman-teman pastekan sebagai card-container yang kedua, maka anak pertama dari setiap card-container judulnya akan berwarna blueviolet.

<div class="card-container">
  <!--- 10 more card..... --->
</div>
<div class="card-container">
  <!--- 10 more card..... --->
</div>

Maka hasilnya akan terlihat seperti:

Output

Bisa terlihat bahwa setiap anak pertama dari card-container warna judulnya akan menjadi blueviolet.

info

Souce code pada chapter ini tersedia di GitHub.
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.5-first-child