Pseudo-kelas Relasional :has()

Kelas semu :has() memilih elemen jika elemen tersebut mengandung turunan yang cocok dengan argumennya. Sering disebut "pemilih induk", fitur ini memungkinkan Anda menerapkan gaya pada elemen induk berdasarkan anak-anaknya — kemampuan yang sebelumnya tidak pernah dimiliki CSS.

.card:has(img) memilih elemen .card apa pun yang mengandung turunan img. Argumennya adalah daftar pemilih relatif — daftar pemilih CSS valid yang mendeskripsikan elemen relatif terhadap elemen subjek.

Terapkan gaya pada wadah formulir saat memiliki masukan yang tidak valid: form:has(:invalid) { border-color: red; }. Terapkan gaya pada bagian yang mengandung judul: section:has(h2) { padding-top: 2rem; }. Elemen induk mengubah tampilannya berdasarkan status anak.

:has() dapat memilih elemen saudara sebelumnya — sesuatu yang tidak dapat dilakukan oleh + dan ~. h2:has(+ p) memilih elemen h2 yang langsung diikuti p. li:has(~ .active) memilih elemen li yang memiliki elemen saudara .active setelahnya.

Respons terhadap validitas formulir bawaan tanpa JavaScript: input:has(~ .error-msg) menerapkan gaya pada masukan yang memiliki pesan kesalahan sebagai elemen saudara. label:has(+ input:required) menerapkan gaya pada label yang pasangannya berupa masukan wajib — semuanya hanya dengan CSS.

Sorot wadah navigasi berdasarkan anak yang aktif: nav:has(.active) menerapkan gaya ke seluruh nav ketika salah satu anak memiliki kelas active. Ini berguna untuk menunjukkan bagian navigasi yang sedang aktif pada tingkat wadah.

.grid:has(.card:focus-within) menerapkan gaya pada seluruh kisi ketika salah satu kartu menerima fokus dari papan ketik. .dropdown:has(:hover) menjaga menu tarik-turun tetap terbuka saat penunjuk diarahkan ke turunan mana pun — lebih rapi daripada rangkaian penggabung saudara yang rumit.

.sidebar:has(nav) menerapkan tata letak yang berbeda dibandingkan dengan .sidebar:not(:has(nav)). Tata letak kondisional tanpa JavaScript: ada atau tidaknya anak tertentu menentukan tata letak induk — sehingga memungkinkan CSS yang benar-benar adaptif dan sadar konten.

:has() dengan pemilih argumen yang luas (misalnya, :has(*)) dapat membebani kinerja — peramban harus memeriksa setiap elemen. Buat argumen :has() tetap spesifik. Jika memungkinkan, pilih :has(> .specific-child) (anak langsung) daripada :has(.specific-child) (turunan mana pun).

:has() didukung di Chrome 105+, Safari 15.4+, dan Firefox 121+. Dukungan standar dasar penuh tersedia sejak akhir 2023. Tidak ada lapisan kompatibilitas untuk fitur ini (simulasinya memerlukan JavaScript) — gunakan dengan peningkatan bertahap pada peramban lama jika fitur ini tidak kritis.

Pola yang sebelumnya memerlukan pendengar peristiwa JS: "tambahkan kelas ke induk ketika anak menerima fokus", "tampilkan hamparan ketika pemicu modal ada", "terapkan gaya berbeda pada kisi ketika memiliki tepat tiga item". :has() menangani semuanya secara deklaratif.

Apa yang membuat :has() unik dibandingkan dengan penggabung CSS yang sudah ada seperti + dan ~?

:has() adalah kelas semu relasional sejati pertama milik CSS yang memungkinkan pemilihan elemen induk dan elemen saudara sebelumnya. Fitur ini mendukung penerapan gaya berbasis konten, respons terhadap status formulir, penyorotan navigasi, serta banyak pola yang sebelumnya memerlukan manipulasi DOM dengan JavaScript — semuanya secara deklaratif dalam CSS.