2025 · 06 · 25 · 3 min

has() e :is(): i selettori CSS che cambiano il modo di scrivere stili

Dopo :has() non ho più bisogno di aggiungere classi con JavaScript per gli stati del parent. Uno dei cambiamenti più utili nel CSS degli ultimi anni.

▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚

:has() è il selettore parent che mancava al CSS. Esempio pratico: .card:has(img) { /* stili per le card con immagine */ }. Prima richiedeva una classe aggiunta con JS o un attributo data-.

:is() semplifica i selettori con varianti multiple. Invece di h1, h2, h3 { margin: 0 } puoi scrivere :is(h1, h2, h3) { margin: 0 }. La specificità è quella dell'elemento più specifico nella lista.

Uso quotidiano di :has(): form:has(:invalid) { border-color: red } — stile sul form quando contiene un campo non valido. Niente JS, niente stato manuale. Puro CSS dichiarativo.

GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?