back to top

CSS !important: cos’è e quando si usa

la keyword !important serve per far prevalere una regola CSS rispetto alle altre con cui è eventualmente in concorrenza. Si supponga, ad esempio, di definire per due volte il colore del testo del medesimo elemento (ad esempio un paragrafo).

Secondo le regole comuni dei CSS (in base alla logica della cascata) una seconda definizione di stile per lo stesso elemento prevale sulla prima. Facciamo un esempio:

p { color: #FF0000; }
p { color: #000000; }

Nel nostro caso il testo dei paragrafi sarà nero perchè la seconda regola prevale sulla prima.

Supponiamo ora di aver aggiunto la keyword !important alla prima regola. Esempio:

p { color: #FF0000 !important; }
p { color: #000000; }

Nel nostro caso il testo dei paragrafi sarà rosso (#FF0000) e non nero (#000000) anche se la seconda definizione del paragrafo prevede questo colore, in quanto la prima regola prevede che la proprietà color sia importante.

Ovviamente se entrambe le regole avessero la keyword !important sulla medesima proprietà color tutto tornerebbe a funzionare secondo la logica della cascata dove la definizione successiva prevale sulla precedente:

p { color: #FF0000 !important; }
p { color: #000000 !important; }

In questo caso il testo sarà nero.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) è un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...
Pubblicità