La importancia de !important en CSS

!important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la última:

#main {
width:600px;
width:800px;
}

Por lo tanto en este ejemplo el navegador asignará 800 píxeles.

La declaración !important puede ser usada para dar prioridad a diferentes parámetros:

#main {
width:600px !important;
width:800px;
}

Ahora en este ejemplo se aplicará un ancho de 600 píxeles.

Internet Explorer 6 y versiones anteriores ignoraba esta palabra clave (!important) mientras que IE7 si la soporta por lo que se puede utilizar para realizar pequeños hacks CSS .

O lo que es lo mismo para poder aplicar diferentes diseños en una misma hoja de estilo tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las entiendan uno de los dos navegadores.

Por lo tanto lo podemos utilizar de tal manera que distingamos entre distintas reglas dependiendo del navegador y sin necesidad de usar Javascript, es un hack muy básico pero sin duda ayudará a entender para que sirve la palabra clave "!important":

#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;
width:800px;
}

En este ejemplo aplica un ancho dinámico (auto) a todos aquellos navegadores que soportan "!important" mientras que aplica un ancho de 800 píxeles a aquellos que no lo soportan por ejemplo IE6.

Este pequeño truco no es realmente del todo útil pero sin duda te ayudará a comprender el significado de esta palabra clave CSS.

Pero no hay que olvidar que !important es muy potente porque se antepone al resto de reglas por lo que hay que usarla con cuidado como por ejemplo cuando queremos que una definición no sea sustituida por ninguna otra ó para restablecer el valor de una propiedad que no nos acordamos donde le asignabamos un valor que ahora no queremos (sale algo en color rojo y no nos acordamos pues color: green !important; y listo).

Usuarios que han visto este tema también han visto...

- CSS para imprimir páginas web
- Cambiando de color las barras de scroll
- Imágenes como hitos de las listas
- Capas flotantes en CSS
- Mejorando la apariencia de los formularios utilizando hojas de estilo

- Versión imprimible de este documento

- Enviar por e-mail este documento