Nel precedente articolo abbiamo analizzato il concetto di specificità delle regole CSS. Bene, a questo punto la domanda sorge spontanea, (come diceva qualcuno) e cioè… c’è qualcosa che sovrascrive la specificità? La risposta, per fortuna, è si e si tratta della keyword: !important
Attenzione, se sei un programmatore, potresti essere ingannato da questa sintassi, e potresti cascare in un clamoroso equivoco: !important non significa “non importante”.
Il concetto è molto semplice, possiamo segnalare qualsiasi dichiarazione individuale come importante. In questo caso la dichiarazione avrà sempre la precedenza e non potrà essere sovrascritta da nessun’altra regola. Vediamo:
.left_bar {
width: 300px !important;
background-color: #DDD;
}
Nell’esempio, width: 300px è stato marcato come importante, mentre background-color: #DDD; non lo è stato. Quindi la rogola è che ogni dichiarazione che si desidera contrassegnare come importante ha bisogno dei suoi propri distinti: !important.
div#left_bar a#shop {color: yellow;}
div a {color: red !important;}
In questo esempio il collegamento sarà di colore giallo. Non importa se la prima regola abbia una specificità di 0,2,0,2, come già detto, ogni dichiarazione importante sovrascriverà qualsiasi dichiarazione non importante. In pratica !important vince sempre.