:har er en utilgivelig vælger

Genudgivet af Platon

Abonnenter: 0

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

Der skete en lille ting på vej til udgivelsen CSS :has() vælgeren til den gamle almanak. Jeg havde oprindeligt beskrevet :has() som en "tilgivende" vælger, idet ideen er, at alt i dets argument vurderes, selvom et eller flere af punkterne er ugyldige.

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

Se ::scoobydoo derinde? Det er fuldstændig ugyldigt. En tilgivende vælgerliste ignorerer den falske vælger og fortsætter med at evaluere resten af emnerne, som om de var skrevet sådan:

article:has(h2, ul) { }

:has() var i sandhed en tilgivende vælger i et tidligere udkast dateret den 7. maj 2022. Men det ændrede sig efter et problem blev rapporteret at den tilgivende natur er i konflikt med jQuery når :has() indeholder en kompleks vælger (f.eks header h2 + p). W3C landede på en resolution til lave :has() en "utilgivende" vælger for blot et par uger siden.

Så vores tidligere eksempel? Hele vælgerlisten er ugyldig, fordi den falske vælger er ugyldig. Men de to andre tilgivende vælgere, :is() , :where(), forbliver uændrede.

Der er lidt af en løsning på dette. Husk, :is() , :where()er tilgivende, selvom :has() er ikke. Det betyder, at vi kan indlejre en af disse vælgere :has() for at få mere tilgivende adfærd:

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

Hvilken du bruger kan have betydning, fordi specificiteten af :is() bestemmes af det mest specifikke punkt på listen. Så hvis du har brug for noget mindre specifikt, er det bedre at række ud efter :where() da det ikke tilføjer specificitetsscoren.

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

Vi har opdateret et par af vores indlæg for at afspejle de seneste oplysninger. Jeg ser masser af andre i naturen, der skal opdateres, så bare en lille PSA til alle, der har brug for at gøre det samme.