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.
