:has er en uforsonlig velger

En liten ting skjedde på veien til publisering CSS :has() velger til den gamle almanakken. Jeg hadde opprinnelig beskrevet :has() som en "tilgivende" velger, ideen er at alt i argumentasjonen blir evaluert, selv om en eller flere av elementene er ugyldige.

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

Se ::scoobydoo der inne? Det er helt ugyldig. En tilgivende velgerliste ignorerer den falske velgeren og fortsetter med å evaluere resten av elementene som om den var skrevet slik:

article:has(h2, ul) { }

:has() var virkelig en tilgivende velger i et tidligere utkast datert 7. mai 2022. Men det endret seg etter at et problem ble rapportert at den tilgivende naturen kommer i konflikt med jQuery når :has() inneholder en kompleks velger (f.eks header h2 + p). W3C landet på en resolusjon til gjøre :has() en "utilgivende" velger bare for noen uker siden.

Så vårt forrige eksempel? Hele velgerlisten er ugyldig fordi den falske velgeren er ugyldig. Men de to andre tilgivende velgerne, :is() og :where(), forblir uendret.

Det er litt av en løsning for dette. Huske, :is() og :where()er tilgivende, selv om :has() er ikke. Det betyr at vi kan hekke en av disse velgerne inn :has() for å få mer tilgivende oppførsel:

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

Hvilken du bruker kan ha betydning fordi spesifisiteten til :is() bestemmes av det mest spesifikke elementet i listen. Så hvis du trenger noe mindre spesifikt, er det bedre å strekke seg etter :where() siden det ikke øker spesifisitetspoengsummen.

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

Vi oppdaterte noen av innleggene våre for å gjenspeile den nyeste informasjonen. Jeg ser mange andre i naturen som må oppdateres, så bare en liten PSA for alle som trenger å gjøre det samme.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/has-is-an-unforgiving-selector/