Utilizzo di :not() e has() in CSS

Pubblicato il 26/05/2025 da Giuseppe Riccio In: Script


Il selettore :not() serve a selezionare un elemento quando non ha una certa classe e applicarvi una proprietà solo in quel caso. Un esempio ricorrente in Wordpress è quando vogliamo applicare una proprietà a tutte le pagine tranne la home o una pagina con una classe specifica:

body:not(.home) { ... }
body:not(.page-50) { ... }

Da notare che non ci sono operatori logici con :not(), ma è possibile concatenarli in un'unica istruzione per evitare più classi o pagine:

 body:not(.home):not(.page-50) { ... } 


Il selettore :has() invece aiuta a selezionare gli elementi del DOM che contengono il selettore passato nella funzione. È essenzialmente un selettore "genitore", sebbene molto più utile di questo. Ad esempio, vogliamo selezionare tutti i div, ma solo quando contengono un paragrafo. Ecco come possiamo fare:

 div:has(p) { background: red; } 

Oppure supponiamo di voler applicare gli stili solo ai link che contengono immagini:

 a:has(> img) { border: 20px solid white; }