Pseudo-kelas Hubungan :has()

Kelas pseudo :has() memilih sesuatu elemen jika elemen itu mengandungi turunan yang sepadan dengan argumen. Ia sering dipanggil "pemilih induk" dan membolehkan penggayaan elemen induk berdasarkan anak-anaknya — keupayaan yang sebelum ini tidak pernah ada dalam CSS.

.card:has(img) memilih mana-mana elemen .card yang mengandungi turunan img. Argumennya ialah senarai pemilih relatif — mana-mana pemilih CSS yang sah dan menerangkan elemen secara relatif kepada elemen subjek.

Gayakan bekas borang apabila ia mempunyai medan masukan yang tidak sah: form:has(:invalid) { border-color: red; }. Gayakan bahagian yang mengandungi tajuk: section:has(h2) { padding-top: 2rem; }. Penampilan induk berubah berdasarkan keadaan anak.

:has() boleh memilih elemen saudara yang terdahulu — sesuatu yang tidak dapat dilakukan oleh + dan ~. h2:has(+ p) memilih elemen h2 yang diikuti terus oleh p. li:has(~ .active) memilih elemen li yang mempunyai elemen saudara .active selepasnya.

Bertindak balas terhadap kesahan borang asli tanpa JavaScript: input:has(~ .error-msg) menggayakan medan masukan yang mempunyai mesej ralat sebagai elemen saudara. label:has(+ input:required) menggayakan label yang medan masukannya berpasangan dan diperlukan — semuanya hanya dengan CSS.

Serlahkan bekas navigasi berdasarkan anak yang aktif: nav:has(.active) menggunakan gaya pada keseluruhan nav apabila mana-mana anak mempunyai kelas aktif. Ini berguna untuk menunjukkan bahagian navigasi yang sedang dipilih pada peringkat bekas.

.grid:has(.card:focus-within) menggayakan keseluruhan grid apabila mana-mana kad menerima fokus papan kekunci. .dropdown:has(:hover) mengekalkan menu lungsur terbuka semasa menuding pada mana-mana turunan — lebih kemas berbanding rangkaian penggabung elemen saudara yang kompleks.

.sidebar:has(nav) menggunakan reka letak yang berbeza daripada .sidebar:not(:has(nav)). Reka letak bersyarat tanpa JavaScript: kewujudan atau ketiadaan anak tertentu memacu reka letak induk, lalu membolehkan CSS yang benar-benar adaptif dan peka terhadap kandungan.

:has() dengan pemilih argumen yang luas (contohnya, :has(*)) boleh menjadi mahal — pelayar perlu menyemak setiap elemen. Pastikan argumen :has() khusus. Utamakan :has(> .specific-child) (anak langsung) berbanding :has(.specific-child) (mana-mana turunan) apabila boleh.

:has() disokong dalam Chrome 105+, Safari 15.4+ dan Firefox 121+. Sokongan garis dasar penuh tersedia sejak penghujung 2023. Tiada polifil wujud (ia memerlukan JavaScript untuk membuat simulasi) — gunakan ciri ini dengan peningkatan berperingkat dalam pelayar lama apabila ciri tersebut tidak kritikal.

Corak yang sebelum ini memerlukan pendengar peristiwa JS: "menambah kelas pada induk apabila anak menerima fokus", "menunjukkan tindanan apabila pencetus modal wujud", dan "menggayakan grid secara berbeza apabila grid mempunyai tepat tiga item". :has() mengendalikan semuanya secara deklaratif.

:has() ialah kelas pseudo hubungan sebenar pertama CSS yang membolehkan pemilihan induk dan elemen saudara yang terdahulu. Ia menyokong penggayaan dipacu kandungan, tindak balas terhadap keadaan borang, penyerlahan navigasi dan banyak corak yang sebelum ini memerlukan manipulasi DOM oleh JavaScript — semuanya secara deklaratif dalam CSS.