:has è un selettore spietato

È successa una piccola cosa prima di pubblicare il file CSS :has() selettore al vecchio Almanacco. avevo originariamente descritto :has() come selettore "perdonante", l'idea è che qualsiasi cosa nel suo argomento venga valutata, anche se uno o più elementi non sono validi.

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

See ::scoobydoo lì dentro? Questo è totalmente invalido. Un elenco di selettori indulgente ignora quel selettore fasullo e procede a valutare il resto degli elementi come se fosse scritto in questo modo:

article:has(h2, ul) { }

:has() era davvero un selezionatore indulgente in una precedente bozza datata 7 maggio 2022. Ma questo è cambiato dopo che è stato segnalato un problema che la natura indulgente è in conflitto con jQuery quando :has() contiene un selettore complesso (es header h2 + p). Il W3C è arrivato a una risoluzione a make :has() un selezionatore “implacabile”. solo poche settimane fa.

Quindi, il nostro esempio precedente? L'intero elenco di selettori non è valido perché il selettore fasullo non è valido. Ma gli altri due selettori indulgenti, :is() ed :where(), rimangono invariati.

C'è un po 'di soluzione per questo. Ricorda, :is() ed :where()sono indulgenti, anche se :has() non è. Ciò significa che possiamo nidificare uno di questi selettori :has() per ottenere un comportamento più indulgente:

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

Quale usi potrebbe essere importante perché la specificità di :is() è determinato dall'elemento più specifico nel suo elenco. Quindi, se hai bisogno di qualcosa di meno specifico, faresti meglio a cercarlo :where() poiché non si aggiunge al punteggio di specificità.

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

Abbiamo aggiornato alcuni dei nostri post per riflettere le informazioni più recenti. Sto vedendo molti altri in natura che devono essere aggiornati, quindi solo un piccolo PSA per chiunque abbia bisogno di fare lo stesso.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/has-is-an-unforgiving-selector/