Pseudo-classe relazionale :has()

La pseudoclasse :has() seleziona un elemento se contiene un discendente che corrisponde all'argomento. Viene spesso chiamata "selettore genitore" e consente di applicare uno stile a un elemento genitore in base ai suoi figli, una funzionalità che CSS non aveva mai offerto prima.

.card:has(img) seleziona qualsiasi elemento .card che contiene un discendente img. L'argomento è un elenco di selettori relativi: qualsiasi selettore CSS valido che descriva elementi in relazione all'elemento soggetto.

Applichi uno stile a un contenitore di modulo quando contiene un input non valido: form:has(:invalid) { border-color: red; }. Applichi uno stile a una sezione che contiene un'intestazione: section:has(h2) { padding-top: 2rem; }. L'aspetto del genitore cambia in base allo stato del figlio.

:has() può selezionare i fratelli precedenti, cosa che + e ~ non consentono. h2:has(+ p) seleziona gli elementi h2 immediatamente seguiti da p. li:has(~ .active) seleziona gli elementi li che hanno un fratello successivo .active.

Reagisca alla validità nativa dei moduli senza JavaScript: input:has(~ .error-msg) applica uno stile a un input che ha un messaggio di errore tra i fratelli. label:has(+ input:required) applica uno stile alle label il cui input associato è obbligatorio, tutto tramite il solo CSS.

Evidenzi i contenitori di navigazione in base al figlio attivo: nav:has(.active) applica stili all'intero nav quando un figlio qualsiasi ha la classe active. È utile per indicare, a livello del contenitore, quale sezione della navigazione è quella corrente.

.grid:has(.card:focus-within) applica uno stile all'intera griglia quando una qualsiasi card riceve il focus da tastiera. .dropdown:has(:hover) mantiene aperto un menu a discesa mentre si passa il mouse su un discendente qualsiasi, in modo più semplice rispetto a complesse catene di combinatori tra fratelli.

.sidebar:has(nav) applica un layout diverso rispetto a .sidebar:not(:has(nav)). È possibile creare layout condizionali senza JavaScript: la presenza o l'assenza di determinati figli guida il layout del genitore, consentendo di usare CSS realmente adattivo e consapevole del contenuto.

:has() con selettori argomento generici, ad esempio :has(*), può risultare costoso: il browser deve controllare ogni elemento. Mantenga specifici gli argomenti di :has(). Quando possibile, preferisca :has(> .specific-child) (figlio diretto) a :has(.specific-child) (qualsiasi discendente).

:has() è supportato da Chrome 105+, Safari 15.4+ e Firefox 121+. Il supporto completo è disponibile nella baseline dalla fine del 2023. Non esiste alcun polyfill, perché richiederebbe JavaScript per simulare la funzionalità: lo utilizzi con il progressive enhancement nei browser meno recenti, quando la funzionalità non è essenziale.

Pattern che in precedenza richiedevano listener di eventi JS: "aggiungere una classe al genitore quando il figlio riceve il focus", "mostrare un overlay quando esiste un elemento che attiva una modale", "applicare uno stile diverso a una griglia quando contiene esattamente tre elementi". :has() gestisce tutti questi casi in modo dichiarativo.

Che cosa rende :has() unico rispetto ai combinatori CSS esistenti come + e ~?

:has() è la prima vera pseudoclasse relazionale di CSS e consente di selezionare genitori e fratelli precedenti. Permette di applicare stili guidati dal contenuto, reagire allo stato dei moduli, evidenziare la navigazione e gestire molti pattern che in precedenza richiedevano la manipolazione del DOM tramite JavaScript, il tutto in modo dichiarativo con CSS.