:has() Bukan Selektor Parent. Ia Menghapus JavaScript.

Cari classList.toggle di kode Anda.

Anda mungkin menemukan banyak contoh pola yang sama. Seorang pengguna mengklik checkbox atau memfokuskan sebuah field. Anda menggunakan JavaScript untuk melakukan toggle class pada elemen parent. Hal ini memungkinkan CSS untuk memberikan gaya pada parent tersebut.

Anda dapat menghapus sebagian besar kode ini.

Orang-orang menyebut :has() sebagai parent selector. Label ini salah. :has() menguji sebuah kondisi. Ia memeriksa isi dari sebuah elemen untuk memutuskan apakah sebuah gaya diterapkan.

Ia dapat memeriksa:

  • Elemen keturunan (descendant)
  • Sibling tertentu
  • Jumlah item
  • Tidak adanya suatu elemen

Berikut adalah beberapa contoh:

• Berikan gaya pada card jika berisi gambar: .card:has(img) { ... }

• Berikan gaya pada baris saat checkbox dicentang: .option-row:has(input:checked) { background: var(--selected-bg); }

• Ubah tata letak grid berdasarkan jumlah item: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

Contoh terakhir mengubah tata letak menggunakan CSS murni. Ia membaca status DOM secara langsung.

Sebelumnya, Anda membutuhkan JavaScript untuk bertindak sebagai pembawa pesan. Sebuah elemen anak tidak dapat memicu gaya pada leluhurnya (ancestor). Anda harus menulis listener untuk memindahkan class ke atas dalam struktur pohon (tree).

Sekarang, pembawa pesan tersebut sudah tidak diperlukan lagi.

Jika Anda menggunakan :has(), gaya Anda akan selalu benar. Gaya tersebut bekerja pada render pertama. Gaya tersebut bekerja saat pengguna menekan tombol kembali di browser mereka. Tidak ada jeda antara perubahan status dan perubahan gaya.

Gunakan untuk:

  • Validasi formulir
  • Keadaan kosong (empty states) dalam daftar
  • Panel yang dapat di-toggle

Perlu dicatat bahwa :has() memiliki konsekuensi performa. Browser harus mengevaluasi selektor bagian dalam terhadap elemen keturunannya. Untuk sebagian besar tugas UI seperti validasi atau toggle, Anda tidak akan merasakan perbedaannya.

Hindari menggunakannya untuk perubahan frekuensi tinggi seperti posisi scroll atau ribuan status hover.

Berhentilah melakukan toggle class hanya untuk menerapkan gaya dari elemen anak. Tanyakan apakah :has() dapat menyatakan kondisi tersebut sebagai gantinya. CSS Anda akan menyusut dan JavaScript Anda akan menghilang.

:has() berfungsi di Chrome, Firefox, Safari, dan Edge.

Sumber: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej