RRI.CO.ID, Cirebon - Dunia pengembangan web terus berkembang seiring hadirnya fitur baru dalam standar CSS Selectors Level 4. Salah satunya adalah pseudo-class :has() yang memungkinkan pengembang melakukan seleksi elemen berdasarkan isi di dalamnya.

Sebelumnya, kebutuhan untuk mengubah tampilan elemen berdasarkan kondisi child hanya bisa dilakukan menggunakan JavaScript. Pengembang harus menambahkan event listener dan manipulasi class untuk mencapai hasil yang diinginkan.

Kini, dengan :has(), proses tersebut dapat dilakukan langsung menggunakan CSS tanpa tambahan kode JavaScript. Misalnya, sebuah form dapat otomatis berubah tampilan ketika memiliki input yang tidak valid.

Dalam praktiknya, terdapat beberapa contoh penggunaan :has() yang mulai banyak diterapkan. Salah satunya adalah pada validasi form, di mana elemen form dapat langsung diberi gaya khusus ketika terdapat input yang tidak memenuhi syarat.

Berikut contoh penerapan pada validasi form:

form:has(input:invalid) {

border: 2px solid red;

}

Contoh lain adalah pada label dan checkbox, di mana tampilan label berubah saat checkbox dicentang:

Setuju dengan syarat

label:has(input:checked) {

color: green;

}

Selain itu, :has() juga dapat digunakan untuk navigasi menu aktif:

• Beranda

• Profil

li:has(a.active) {

font-weight: bold;

}

Contoh-contoh tersebut menunjukkan bagaimana :has() mampu menggantikan peran JavaScript dalam kebutuhan styling berbasis kondisi elemen.

Penggunaan :has() dinilai membuat kode lebih ringkas dan mudah dirawat dalam pengembangan antarmuka. Selain itu, pendekatan ini juga mengurangi ketergantungan pada JavaScript untuk kebutuhan styling sederhana.

Meski demikian, JavaScript tetap dibutuhkan untuk interaksi yang lebih kompleks seperti pengolahan data dan komunikasi dengan server. Pseudo-class :has() lebih difokuskan untuk kebutuhan visual dan kondisi berbasis struktur dokumen.

Dengan hadirnya fitur ini, pengembang kini memiliki alternatif yang lebih efisien dalam membangun tampilan web modern.