Sovrascrivere le proprietà CSS con !important

In questo breve tutorial viene spiegato come utilizzare la keyword !important per forzare l’utilizzo di una proprietà CSS anche se quest’ultima venisse sovrascritta in seguito.

Se ad esempio avessimo un codice simile a questo:

<style>
.classe1 { color: #000; }
.classe2 { color: #900; }
</style>
<p class=”classe1 classe2”>Hello World</p>

Il colore che risulterebbe nel testo sarebbe il rosso (#900) in quanto “classe2” essendo dichiarata DOPO “classe1” ne sovrascrive la proprietà color.

Inserendo !important invece diciamo al browser di utilizzare sempre quella specifica proprietà, che prevale anche se viene sovrascritta in seguito.

Ad esempio:

<style>
.classe1 { color: #000 !important; }
.classe2 { color: #900; }
</style>
<p class=”classe1 classe2”>Hello World</p>

In questo caso il testo resterà di colore nero (#000) perché mettendo !important nella proprietà color di “classe1” abbiamo forzato il CSS ad utilizzare sempre il colore nero, anche se è stato sovrascritto dalla proprietà color di “classe2”.

La Keyword !important è molto comoda soprattutto quando si lavora con modifiche di layout e temi esistenti.

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website