PSEUDO-CLASS CHILD

Pseudo-class child dalam CSS digunakan untuk memilih elemen yang berada dalam posisi khusus relatif terhadap saudara kandungnya. Ini bisa sangat berguna saat kamu ingin menyeleksi elemen-elemen tertentu dalam DOM dan menerapkan gaya yang berbeda pada mereka.

Penggunaan dasar pseudo-class :nth-child

Pseudo-class :nth-child() digunakan untuk memilih elemen yang merupakan anak ke-n dalam induknya. Ini sangat berguna jika kamu ingin menerapkan gaya khusus untuk elemen tertentu dalam grup elemen.

Sebagai contoh, kamu dapat menerapkan gaya berbeda pada setiap elemen li genap dalam sebuah list dengan kode berikut:

    li:nth-child(even){
        background-color: lightgrey;
    }

Dalam contoh di atas, semua elemen li yang merupakan anak genap dalam ul-nya akan memiliki latar belakang berwarna abu-abu.

Pseudo-class :first-child dan :last-child

Selain :nth-child, kamu juga dapat menggunakan :first-child dan :last-child untuk menarget elemen pertama dan terakhir dalam induknya secara langsung.

Dengan memanfaatkan :first-child dan :last-child, kamu dapat memberi gaya khusus pada elemen pertama dan terakhir dalam sebuah grup tanpa perlu mengetahui berapa banyak elemen dalam grup tersebut. Sebagai contoh:

    ul li:first-child {
        font-weight: bold;
    }
    
    ul li:last-child {
        text-decoration: underline;
    }

Pada contoh di atas, elemen li pertama dalam ul akan ditampilkan dengan font tebal, sementara elemen li terakhir akan digarisbawahi.

Penggunaan pesudo-class :only-child

Jika kamu hanya ingin menargetkan elemen yang merupakan satu-satunya anak pada elemen induk, kamu dapat menggunakan pseudo-class :only-child. Berikut adalah contoh penggunaannya:

    p:only-child {
        color: red;
    }

Pada contoh di atas, setiap elemen paragraf yang merupakan satu-satunya anak dalam elemen induknya akan berwarna merah.

Dengan memahami dan menerapkan pseudo-class child dengan benar, kamu bisa menghasilkan desain dan tata letak yang lebih dinamis dan menarik secara visual dalam pembuatan web. Selamat mencoba!