Che cos'è !important?

La regola !important nei CSS viene utilizzata per aggiungere più importanza a una proprietà/valore rispetto al normale.

Infatti, se si usa la regola !important, essa sovrascriverà TUTTE le regole di stile precedenti per quella specifica proprietà su quell'elemento!

Esempio

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

Visualizza esempio

Spiegazione dell'esempio

Nell'esempio su riportato. tutti e tre i paragrafi avranno uno sfondo rosso, anche se il selettore dell'ID e il selettore della classe hanno una specificità maggiore. La regola !important sovrascrive la proprietà background-color in entrambi i casi.

Importante informazione su !important

L'unico modo per sovrascrivere una regola !important è includere un'altra regola !important in una dichiarazione con la stessa (o superiore) specificità nel codice sorgente - e qui inizia il problema! Ciò rende il codice CSS confuso e il debugging sarà difficile, soprattutto se hai un foglio di stile di grandi dimensioni!

Qui è riportato un semplice esempio. Non è molto chiaro, quando si guarda il codice sorgente CSS, quale colore sia considerato più importante:

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

Visualizza esempio

Forse uno o due usi corretti di !important

Un modo per utilizzare !important è se si deve sovrascrivere uno stile che non può essere sovrascritto in nessun altro modo. Ciò potrebbe accadere se si sta lavorando su un sistema di gestione dei contenuti (CMS) e non si può modificare il codice CSS. Quindi si può impostare alcuni stili personalizzati per sovrascrivere alcuni stili CMS.

Un altro modo di utilizzare !important è: supponiamo di volere un aspetto speciale per tutti i pulsanti su una pagina. Qui, i pulsanti hanno uno stile con un colore di sfondo grigio, testo bianco e un po' di riempimento e bordo:

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Visualizza esempio

L'aspetto di un pulsante a volte può cambiare se lo inseriamo all'interno di un altro elemento con maggiore specificità e le proprietà entrano in conflitto. Ecco un esempio di questo:

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Visualizza esempio

Per "forzare" tutti i pulsanti ad avere lo stesso aspetto, qualunque cosa accada, possiamo aggiungere la regola !important alle proprietà del pulsante, in questo modo:

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Visualizza esempio