Digital Transformation
CSS :has() Selector
TL;DR: CSS
:has()adalah selector parent yang memungkinkan elemen induk berubah style berdasarkan kondisi elemen anak. Sejak Desember 2023 fitur ini stabil di Chrome, Safari, dan Firefox, sehingga marketer dan developer bisa menyingkirkan JavaScript hanya untuk style sederhana.
Apa itu :has() Selector?
Selector :has() membaca pola seperti "form yang mengandung input invalid" atau "kartu yang punya badge diskon", lalu menerapkan style ke elemen induk tersebut. Sebelum :has(), kasus seperti ini wajib pakai JavaScript untuk menambah class manual. Lihat CSS Container Queries untuk pasangan fitur modern lain yang sering dipakai bersama.
Pola Umum
| Pola | Contoh |
|---|---|
| Form invalid | form:has(input:invalid) button { opacity: .5; } |
| Kartu dengan badge | .card:has(.badge-sale) { border-color: red; } |
| Layout adaptif | .section:has(img) { grid-template-columns: 1fr 1fr; } |
Kenapa Penting?
Praktik standar di industri menunjukkan banyak komponen interaktif sebenarnya tidak butuh JavaScript jika :has() dipakai. Untuk website bisnis Indonesia yang ingin pangkas bundle JS dan naikkan skor Core Web Vitals, ini termasuk kemenangan cepat. Dari pengalaman menangani komponen testimonial dan harga, mengganti listener change dengan :has() saja sudah memotong 4 sampai 8 KB JavaScript per halaman.
Pertanyaan Umum
Apakah :has() berat untuk performa?
Tidak signifikan untuk pemakaian umum. Browser sudah mengoptimasi :has() pada tingkat selector engine. Hindari memakai :has() di root document seperti body:has(*) karena memaksa rescan luas.
Bisakah :has() menggantikan semua JavaScript untuk style?
Tidak. :has() cocok untuk state yang ekspresif dari DOM (ada/tidaknya elemen, atribut, atau pseudo-class). State berbasis data jarak jauh, seperti hasil fetch, tetap butuh JavaScript.
Istilah Terkait