:has Is An Unforgiving Selector

Republicat de Platon

Urmaritori: 0

:has is an unforgiving selector PlatoBlockchain Data Intelligence. Vertical Search. Ai.

S-a întâmplat un lucru mic în drumul spre publicarea CSS :has() selector la vechiul Almanah. Am descris inițial :has() ca un selector „îngăduitor”, ideea fiind că orice din argumentul său este evaluat, chiar dacă unul sau mai mulți itemi sunt invalid.

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

Vedea ::scoobydoo acolo? Asta e total invalid. O listă de selectoare iertatoare ignoră acel selector fals și continuă să evalueze restul elementelor ca și cum ar fi scris astfel:

article:has(h2, ul) { }

:has() a fost într-adevăr un selector îngăduitor într-un proiect anterior din 7 mai 2022. Dar asta sa schimbat după ce a fost raportată o problemă că natura iertătoare intră în conflict cu jQuery când :has() conține un selector complex (de ex header h2 + p). W3C a ajuns la o rezoluție de a face :has() un selector „neiertat”. acum doar câteva săptămâni.

Deci, exemplul nostru anterior? Întreaga listă de selectoare este invalidă, deoarece selectorul fals este invalid. Dar ceilalți doi selectori iertatori, :is() și :where(), sunt lăsate neschimbate.

Există o mică soluție pentru asta. Tine minte, :is() și :where()sunt iertătoare, chiar dacă :has() nu este. Asta înseamnă că putem cuibari oricare dintre acești selectori :has() pentru a obține un comportament mai iertător:

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

Pe care îl folosiți ar putea conta din cauza specificității :is() este determinat de elementul cel mai specific din lista sa. Deci, dacă ai nevoie de ceva mai puțin specific, ai face mai bine să ajungi :where() întrucât nu se adaugă la scorul de specificitate.

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

Am actualizat câteva dintre postările noastre pentru a reflecta cele mai recente informații. Văd o mulțime de altele în sălbăticie care trebuie actualizate, așa că doar un mic PSA pentru oricine trebuie să facă același lucru.