DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Pelajari cara menggunakan pseudo-class nth-child dalam CSS untuk memilih elemen yang memiliki urutan tertentu dalam grup elemen.
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.
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.
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.
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!