Utilizzo di :not() e has() in CSS
Pubblicato il 26/05/2025 da Giuseppe Riccio

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; }