Pillole css: Usa !important in modo corretto

Pillole css: Usa !important in modo corretto

La regola !important serve per far prevalere una proprietà css nel caso in cui ad un elemento ne venga assegnata più di una, ma facciamo un esempio:

span{font-size: 12px;}
span{font-size: 10px;}

In questo caso si ha una ripetizione della proprietà per lo stesso elemento e viene premiata quella scritta per ultima.
Ma se noi scriviamo in questo modo:
span{font-size: 12px !important;}
Allora la proprietà con !important sovrascrive tutte le altre. Tuttavia l’ulitizzo della proprietà con !important può causare diversi problemi nel web design ed è buona norma sovrascrivere l’elemento con una classe o un id.
Esempio:

span.small{font-size: 12px;}
span.extra-small{font-size: 10px;}

In questo modo è possibile estendere il selettore universale span con una classe. E’ anche possibile sovrascrivere le proprietà delle classi estendendole a loro volta.
Esempio:

span.small{font-size: 12px; color: #000;}
span.small.red{color: #FF0000;}

In questo caso la classe small assegna le proprietà ad entrambi i selettori span e la classe red sovrascrivere la proprietà color della classe small senza dover utilizzare la regola !important poichè l’estensione ha la priorità.



Vincenzo Chindemi
Panoramica privacy

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.