:has adalah pemilih yang tak kenal ampun

Hal kecil terjadi dalam perjalanan untuk menerbitkan CSS :has() pemilih ke Almanak lama. Saya awalnya dijelaskan :has() sebagai pemilih "pemaaf", idenya adalah bahwa apa pun dalam argumennya dievaluasi, bahkan jika satu atau lebih item tidak valid.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

Lihat ::scoobydoo di sana? Itu sama sekali tidak valid. Daftar pemilih yang memaafkan mengabaikan pemilih palsu itu dan mulai mengevaluasi item lainnya seolah-olah ditulis seperti ini:

article:has(h2, ul) { }

:has() memang pemilih pemaaf dalam draf sebelumnya tertanggal 7 Mei 2022. Tapi itu berubah setelah masalah dilaporkan bahwa sifat pemaaf bertentangan dengan jQuery kapan :has() berisi pemilih yang kompleks (mis header h2 + p). W3C mendarat dengan resolusi untuk membuat :has() pemilih "tak kenal ampun". hanya beberapa minggu yang lalu.

Jadi, contoh kita sebelumnya? Seluruh daftar pemilih tidak valid karena pemilih palsu tidak valid. Tapi dua pemilih pemaaf lainnya, :is() dan :where(), dibiarkan tidak berubah.

Ada sedikit solusi untuk ini. Ingat, :is() dan :where()memaafkan, bahkan jika :has() tidak. Itu berarti kita dapat menyarangkan salah satu dari penyeleksi tersebut :has() untuk mendapatkan perilaku yang lebih pemaaf:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Yang mana yang Anda gunakan mungkin penting karena kekhususannya :is() ditentukan oleh item paling spesifik dalam daftarnya. Jadi, jika Anda membutuhkan sesuatu yang kurang spesifik, sebaiknya Anda meraihnya :where() karena tidak menambah skor spesifisitas.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Kami memperbarui beberapa posting kami untuk mencerminkan info terbaru. Saya melihat banyak orang lain di alam liar yang perlu diperbarui, jadi hanya sedikit PSA untuk siapa saja yang perlu melakukan hal yang sama.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/has-is-an-unforgiving-selector/