Guida CSS interattiva: !important

Q: Come si sovrascrive !important?

Con un'altra dichiarazione !important che abbia una specificità più alta, oppure la stessa specificità e una posizione successiva nel foglio di stile. Uno style inline con !important batte ogni !important dei fogli di stile.

Q: !important sovrascrive gli stili inline?

Sì. Una dichiarazione con !important in un foglio di stile batte una dichiarazione normale in un attributo style. Non batte una dichiarazione inline che sia anch'essa marcata !important.

Cosa fa !important

Aggiungere !important dopo un valore fa vincere quella dichiarazione su ogni dichiarazione normale della stessa proprietà sullo stesso elemento. La specificità del selettore e l'ordine nel sorgente non contano più.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

Senza !important vincerebbe il selettore ID e il testo sarebbe blu. Cancella !important nell'editor per vederlo.

Sintassi

selector {
  property: value !important;
}

Va dopo il valore e prima del punto e virgola. Si applica solo a quella dichiarazione, non all'intera regola. Funziona anche nelle proprietà abbreviate (margin: 0 !important; rende importanti tutti e quattro i lati) e in un attributo style.

Chi batte chi

Per gli stili scritti dall'autore della pagina, dal più debole al più forte:

Livello	Dichiarazione	Esempio
1	Dichiarazione normale in un foglio di stile	`p { color: blue; }`
2	Dichiarazione normale in un attributo `style`	`<p style="color: blue">`
3	`!important` in un foglio di stile	`p { color: blue !important; }`
4	`!important` in un attributo `style`	`<p style="color: blue !important">`

All'interno dello stesso livello decide la specificità, poi l'ordine in cui compaiono le dichiarazioni: vince quella scritta dopo.

Questo è l'unico uso quotidiano legittimo di !important: sovrascrivere uno stile inline che non puoi modificare, come quello scritto da un widget di terze parti.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

Quando entrambe le dichiarazioni sono !important

!important contro !important torna alle regole normali: vince la specificità più alta e, a parità, vince la dichiarazione scritta dopo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

Ecco come !important si alimenta da solo: appena una regola lo usa, la regola che deve sovrascriverla deve usarlo anche lei, e la specificità ricomincia a salire.

La specificità CSS in una tabella

La specificità è il peso di un selettore. Conta tre numeri:

Colonna	Cosa conta	Selettore di esempio	Specificità
A	Selettori ID	`#nav`	(1,0,0)
B	Classi, attributi, pseudo-classi	`.btn`, `[type="text"]`, `:hover`	(0,1,0) ciascuno
C	Selettori di tipo, pseudo-elementi	`p`, `::before`	(0,0,1) ciascuno
nessuna	`*`, combinatori (`>`, `+`, `~`, spazio)	`*`, `ul > li`	non aggiungono niente

Confronta prima la colonna A; solo a parità guarda la B, poi la C. Quindi #nav a (1,0,1) batte .menu .item .link a (0,3,1): un ID pesa più di qualsiasi numero di classi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

Capire questa tabella è ciò che ti permette di evitare !important: la maggior parte dei problemi del tipo "il mio CSS non si applica" dipende da una regola più specifica altrove, visibile nel pannello Styles dei DevTools con la tua dichiarazione barrata.

Alternative più pulite

Eguaglia la specificità, poi affidati all'ordine. Carica il tuo foglio di stile dopo quello della libreria e usa un selettore specifico almeno quanto il suo.
Abbassa la specificità dell'altra regola con :where(). Tutto quello che sta dentro :where() conta zero, quindi gli stili di base scritti così sono facili da sovrascrivere.
Usa una variabile CSS come aggancio. Un componente che legge var(--btn-bg) si può personalizzare senza combattere con i suoi selettori. Vedi le variabili CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

Impostare !important da JavaScript

element.style.color = 'red !important' non funziona: il valore non è valido e viene ignorato. Usa setProperty con un terzo argomento:

el.style.setProperty('color', '#f59e0b', 'important');

Errori comuni

Metterlo nel posto sbagliato. color: !important red; non è valido; va dopo il valore.
Usarlo in @keyframes. Le dichiarazioni marcate !important dentro i keyframe vengono ignorate.
Risolvere ogni conflitto con lui. Trova la regola vincente nei DevTools ed eguaglia o abbassa la sua specificità.
Aspettarsi che agisca su un'altra proprietà. color: red !important non fa niente per background.
Dimenticare che un !important inline batte il tuo. Nessuna regola nei fogli di stile della pagina può sovrascrivere style="color: red !important"; modifica l'attributo stesso, per esempio con JavaScript.

Domande frequenti

Cosa fa !important in CSS?

Dà a una dichiarazione la priorità su ogni dichiarazione normale della stessa proprietà sullo stesso elemento, a prescindere dalla specificità del selettore o dall'ordine. Scrivilo dopo il valore: color: red !important;.

Come si sovrascrive !important?

Con un'altra dichiarazione !important che abbia una specificità più alta, oppure la stessa specificità e una posizione successiva nel foglio di stile. Uno style inline con !important batte ogni !important dei fogli di stile.

!important sovrascrive gli stili inline?

Sì. Una dichiarazione con !important in un foglio di stile batte una dichiarazione normale in un attributo style. Non batte una dichiarazione inline che sia anch'essa marcata !important.

Usare !important è una cattiva pratica?

Se lo usi per vincere una lotta di specificità, sì: la sovrascrittura successiva richiederà anche lei !important e il foglio di stile diventa difficile da modificare. È ragionevole per le classi di utilità che devono applicarsi sempre (come .hidden), per sovrascrivere stili inline di terze parti e nei fogli di stile dell'utente.

Come si calcola la specificità CSS?

Conta tre colonne: selettori ID, poi classi, attributi e pseudo-classi, poi selettori di tipo e pseudo-elementi. Confronta colonna per colonna partendo dalla prima, quindi #nav a (1,0,1) batte .menu .item a (0,2,1). Il selettore universale * e i combinatori non aggiungono niente.

Concetti correlati