Fin dalla nascita di CSS, un selettore permette di attribuire stili a qualsiasi elemento della pagina. Nel seguente esempio
section .target {
color: rose;
}attribuiamo un colore di sfondo all’elemento .target all’interno di un tag <section> . Per raggiungere l’elemento .target abbiamo usato un approccio discendente, cioè partendo da un tag più grande che lo contiene. Fino a poco tempo fa, se avessimo voluto stilizzare tutti i tag <section> che contengono elementi con classe target, avremmo dovuto aggiungere codice Javascript, con la complessità che ne consegue.
La nuova pseudoclasse :has() consente di attribuire stili a un elemento HTML in base ai suoi elementi figli, direttamente usando CSS.
Un’applicazione pratica
Per illustrare le capacità di questo strumento, si può esaminare il seguente esempio
See the Pen
Untitled by Daniele Pani (@daniele-pani)
on CodePen.
In questo caso, è possibile notare che l’icona determina il suo colore di sfondo, attribuito all’elemento <a> che la contiene.
Vediamo un altro caso.
See the Pen
Form layout a seconda del tipo di controllo utilizzando :has() by Daniele Pani (@daniele-pani)
on CodePen.
In questo esempio ho creato un layout per un modulo in cui le larghezze delle colonne sono determinate direttamente dalla tipologia di controllo. In particolare, quando la colonna .form-col contiene dei controlli di tipo text e email, la sua larghezza sarà pari a metà dello spazio disponibile.
Conclusioni
L’introduzione della pseudoclasse relazionale :has() in CSS offre nuove possibilità di attribuire stili agli elementi HTML. Questa funzionalità semplifica l’applicazione di stili a specifici elementi all’interno di strutture più complesse, consentendo una maggiore flessibilità nel design delle pagine web.
Il suo utilizzo dev’essere attento, perchè richiede al browser di effettuare una verifica più complessa per determinare se un elemento soddisfa il selettore specificato, con possibile aumento dei tempi di calcolo. In compenso, se il selettore è relativamente semplice e la pagina è di piccole o medie dimensioni, l’effetto sulle performance sarà trascurabile.