PSEUDO-CLASS NTH URUTAN

Pseudo-class :nth-child dalam CSS adalah alat yang sangat berguna untuk menarget dan merancang elemen berdasarkan posisinya dalam grup elemen. Dalam artikel ini, kita akan membahas cara menggunakan pseudo-class ini dengan berbagai contoh.

Menentukan urutan dengan :nth-child

Menggunakan pseudo-class :nth-child, kamu bisa menarget elemen berdasarkan urutan mereka. Untuk melakukan ini, cukup berikan angka ke nth-child sebagai parameter.

Misalnya, jika kamu ingin menerapkan gaya pada elemen ketiga dalam grup, kamu bisa menggunakan kode berikut:

p:nth-child(3) {
  color: red;
}

Dalam contoh di atas, paragraf ketiga akan berwarna merah.

Menggunakan formula dengan :nth-child

Selain angka, kamu juga bisa menggunakan rumus dalam :nth-child. Dengan menggunakan rumus, kamu bisa menarget elemen dalam pola tertentu.

Misalnya, jika kamu ingin menerapkan gaya pada setiap elemen keempat dalam grup, kamu bisa menggunakan kode berikut:

p:nth-child(4n) {
  color: blue;
}

Dalam contoh ini, setiap paragraf keempat akan berwarna biru.

Menggunakan ‘even’ dan ‘odd’ dengan :nth-child

Kamu juga bisa menggunakan kata ‘even’ dan ‘odd’ sebagai parameter :nth-child untuk menarget semua elemen genap atau ganjil.

Dengan kode berikut, semua paragraf ganjil akan berwarna hijau:

p:nth-child(odd) {
  color: green;
}

Dan dengan kode ini, semua paragraf genap akan berwarna ungu:

p:nth-child(even) {
  color: purple;
}

Dengan memahami dan memanfaatkan fitur CSS ini, kamu bisa mengontrol penampilan laman web dengan lebih baik dan lebih efisien. Jadi, jangan ragu untuk bereksperimen dan mencoba berbagai pengaturan dengan :nth-child!