Skip to main content

B.6.7. Nth Child

Pada chapter ini kita akan membahas mengenai pseudo-class :nth-child. Pseudo-class :nth-child ini memungkinkan kita untuk menargetkan elemen berdasarkan posisinya sebagai "anak" dari elemen induk, dengan cara yang lebih spesifik dari sekadar anak terakhir atau pertama.

Jangan salah ya, ini bukan anak pertama atau anak terakhir yang biasa kita bahas, tetapi elemen ke-n dari induknya. Hehe, agak teknis tapi seru!

Pseudo-class :nth-child menggunakan sebuah fungsi yang menerima argumen seperti bilangan bulat (1, 2, 3, dst.) atau pola seperti even dan odd untuk memilih elemen ke-n. Ini berguna ketika kita ingin menargetkan elemen tertentu dalam urutan tanpa harus menambahkan class ke setiap elemen. Let's code!

Contohnya, mari kita coba modifikasi kode sebelumnya:

<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

Bisa teman-teman lihat, anak ke 2 dari .card-container judulnya berwarna blueviolet. Tidak hanya itu saja lho, bahkan kita bisa menyeleksi elemen yang urutannya ganjil dengan menggunakan :nth-child. Coba perhatikan kode berikut

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

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

.card:nth-child(odd) h1 {
  color: blueviolet;
}

Kode di atas akan membuat judul dari elemen yang urutannya ganjil (odd) menjadi blueviolet.

Output

Bahkan kita bisa menyeleksi elemen dengan kelipatan tertetu, contohnya kelipatan 3.

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

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

.card:nth-child(3n) h1 {
  color: blueviolet;
}

Maka setiap elemen yang memiliki urutan dari kelipatan 3, judulnya akan berwarna blueviolet.

Output

Sangat fleksibel bukan? nah teman-teman bisa menggunakan :nth-child ini sesuai kebutuhan ya. Teman-teman juga bisa lakukan eksplorasi mengenai pola-pola tertentu untuk menyeleksi elemen di dalam website kalian!

info

Source code pada chapter ini teredia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.6-pseude-class/B.6.7-nth-child