:has affetmeyen bir seçicidir

Yayınlanma yolunda küçük bir şey oldu. CSS :has() selektör eski Almanak'a. başta tarif etmiştim :has() "bağışlayıcı" bir seçici olarak, bir veya daha fazla öğe geçersiz olsa bile argümanındaki herhangi bir şeyin değerlendirilmesi fikri.

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

Yerimizi ::scoobydoo Orada? Bu tamamen geçersiz. Bağışlayıcı bir seçici listesi, bu sahte seçiciyi yok sayar ve geri kalan öğeleri sanki şu şekilde yazılmış gibi değerlendirmeye devam eder:

article:has(h2, ul) { }

:has() gerçekten bağışlayıcı bir seçiciydi 7 Mayıs 2022 tarihli bir önceki taslakta. Ama bu değişti bir sorun bildirildikten sonra affedici doğa jQuery ile çeliştiğinde :has() karmaşık bir seçici içerir (örn. header h2 + p). W3C şu karara vardı: yapmak :has() "affetmeyen" bir seçici sadece birkaç hafta önce.

Peki, önceki örneğimiz? Sahte seçici geçersiz olduğu için seçici listesinin tamamı geçersiz. Ama diğer iki bağışlayıcı seçici, :is() ve :where(), değişmeden bırakılır.

Bunun için biraz geçici bir çözüm var. Unutma, :is() ve :where()olsa bile bağışlayıcıdır :has() değil. Bu, bu seçicilerden herhangi birini içine yerleştirebileceğimiz anlamına gelir. :has() daha bağışlayıcı davranış elde etmek için:

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

Hangisini kullandığınız önemli olabilir, çünkü :is() listesindeki en spesifik öğe tarafından belirlenir. Bu nedenle, daha az spesifik bir şeye ihtiyacınız varsa, :where() çünkü özgüllük puanına katkıda bulunmaz.

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

Gönderilerimizden birkaçını en son bilgileri yansıtacak şekilde güncelledik. Vahşi doğada güncellenmesi gereken pek çok başka şey görüyorum, bu yüzden aynısını yapması gereken herkes için biraz PSA.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://css-tricks.com/has-is-an-unforgiving-selector/