Css !important tutorial : esempi pratici

Di norma, il css segue una regola ben precisa : interpreta il codice dall’alto verso il basso. In pratica, l’ultima regola scritta ha sempre la precedenza rispetto alle precedenti.

Volendo, al contrario, assegnare la precedenza ad una regola in modo assoluto occorre utilizzare la sintassi !important

Il modo migliore per capire il suo utilizzo e funzionamento è fare alcuni esempi banali, ma chiarificatori.

Esempio 1 – Comportamento Standard

[sourcecode language=’php’]
#esempio p {
color: blue;
}
…
#esempio p {
color: red;
}
[/sourcecode]

In tal caso, il tag paragrafo nel div #esempio sarà colorato di rosso poichè la seconda regola sovrascrive, come detto, la prima.

Esempio 2 – Utilizzo di !important

[sourcecode language=’php’]
#esempio p {
color: blue !important;
}
…
#esempio p {
color: red;
}
[/sourcecode]

In questo secondo caso notate l’uso di !important nella prima regola. In tal modo la seconda regola sarà sempre ignorata e mai eseguita.

Esempio 3 – Utilizzo di !important in più regole

[sourcecode language=’php’]
#esempio p {
color: blue !important;
}
…
#esempio p {
color: red !important;
}
[/sourcecode]

Se avete ben digerito il concetto, capirete che in tal caso la seconda regola, questa volta dotata di !important, sovrasciverà inesorabilmente la prima.

L’applicazione di questa sintassi, in pratica, non è assolutamente difficile anche se spesso !important non è utilizzato per il suo scopo originario, ma come trucco per dare informazioni diverse ai browser: eccovi un esempio più complesso, ma ben spiegato.

In conclusione, va precisato, che non tutti i browser digeriscono tale sintassi e, Explorer lo dimostra. Infatti IE6 non legge assolutamente !important.

Ciò vuol dire che, se prendete l’esempio numero 2, in tal caso, il paragrafo sarà colorato di rosso. Anche se non completamente, la cosa sembra risolta con IE7 e IE8.