:has är en oförsonlig väljare

Återutgiven av Platon

anhängare: 0

:has är en oförlåtlig väljare PlatoBlockchain Data Intelligence. Vertikal sökning. Ai.

En liten sak hände på vägen till publiceringen CSS :has() väljare till den gamla almanackan. Jag hade ursprungligen beskrivit :has() som en "förlåtande" väljare, tanken är att allt i dess argument utvärderas, även om en eller flera av objekten är ogiltiga.

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

Se ::scoobydoo där inne? Det är helt ogiltigt. En förlåtande väljarlista ignorerar den falska väljaren och fortsätter att utvärdera resten av objekten som om det vore skrivet så här:

article:has(h2, ul) { }

:has() var verkligen en förlåtande väljare i ett tidigare utkast daterat den 7 maj 2022. Men det ändrades efter att ett problem rapporterats att den förlåtande naturen kommer i konflikt med jQuery när :has() innehåller en komplex väljare (t.ex header h2 + p). W3C landade på en resolution till göra :has() en "oförlåtande" väljare bara för några veckor sedan.

Så vårt tidigare exempel? Hela väljarlistan är ogiltig eftersom den falska väljaren är ogiltig. Men de andra två förlåtande väljarna, :is() och :where(), lämnas oförändrade.

Det finns lite av en lösning för detta. Kom ihåg, :is() och :where()är förlåtande, även om :has() är inte. Det betyder att vi kan kapsla in någon av dessa väljare :has() för att få ett mer förlåtande beteende:

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

Vilken du använder kan ha betydelse eftersom specificiteten hos :is() bestäms av den mest specifika posten i dess lista. Så om du behöver något mindre specifikt är det bättre att nå :where() eftersom det inte bidrar till specificitetspoängen.

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

Vi uppdaterade några av våra inlägg för att återspegla den senaste informationen. Jag ser massor av andra i naturen som behöver uppdateras, så bara en liten PSA för alla som behöver göra detsamma.