Declaración !important en CSS

  • Por
En CSS podemos declarar reglas de estilos como !important para que tomen precedencia sobre otras reglas de estilos que se puedan encontrar en una página web.

Vamos a ver en este artículo de DesarrolloWeb.com, englobado dentro del Manual de CSS, una declaración un tanto especial que podemos utilizar al definir reglas de estilos para una página web. Se trata de !important, una palabra que hará que determinadas propiedades tomen mayor importancia y, por tanto, se tengan más en cuenta que otras que puedan sobreescribirlas.

Otra cosa que veremos de paso es cómo el uso de !important nos proporcionará una sencilla y valida técnica para poder definir reglas de estilos distintas para navegadores antiguos, como Internet Explorer 6.

Además, important! se puede utilizar en las hojas de estilo de usuario, para que cada persona pueda definir para su propio navegador si lo desea, un estilo CSS por defecto que se tenga en cuenta en todas las web que visitemos. Este caso ya se explicó en el artículo Reglas de estilo CSS de usuario y de autor.

Uso y efecto de la declaración !important

Para utilizar !important en una regla de estilo, siempre se coloca en la parte del valor del atributo, antes del punto y coma ";". Por ejemplo:

body{
font-family: verdana, arial !important;
}

El efecto es que siempre se aplicará el estilo definido como !important, aunque luego se pueda sobrescribir con otro estilo más tarde en la misma declaración o en otra distinta. Veamos este ejemplo:

td{
font-size: 16pt !important;
font-size: 8px;
}

Tenemos una declaración de estilos para los elementos TD, donde definimos dos veces el atributo font-size. En condiciones normales, se tendría en cuenta el valor definido en segundo lugar, porque lo sobrescribe. Sin embargo, que que el primer font-size está definido como !important, en realidad lo que ocurrirá es que se tenga en cuenta finalmente y el tamaño de letra por tanto será 16pt.

Este efecto lo podemos aplicar también a distintos tipos de selectores de CSS. De modo que podremos encontrarnos que para un elemento se indique un estilo y luego para una clase (class de CSS) se aplique otro y se tenga en cuenta el definido como !important. Veamos este ejemplo de CSS:

td{
font-family: verdana, arial !important;
}
td.micelda{
font-family: monospace;
}

Que aplicado sobre el siguiente HTML:

<table>
<tr> 
<td class="micelda">Hola</td>
<td>23232</td>
</tr>
</table>

Daría como resultado, en condiciones normales, que la primera celda, de clase "micelda", tuviese la fuente font-family: monospace y la segunda celda, que no tiene ningún class, tuviera el estilo font-family: verdana, arial. Sin embargo, como el font-family definido en primer caso tiene la declaración !important, la fuente será siempre verdana, arial, para las dos celdas.

Usar !important para definir estilos diferentes en navegadores antiguos

La declaración !important no la entienden todos los navegadores, por tanto, algunos simplemente la ignorarán y otros no. El caso más representativo, por ser un navegador que todavía se utiliza habitualmente por los internautas, sería Internet Explorer 6.

Así pues, utilizando !important podemos conseguir definir estilos diferentes para Internet Explorer 6 y para la mayoría de los otros navegadores que pueden visitar nuestra web. Esto lo podemos conseguir de la siguiente manera.

div{
   background-image: url(fondo-semitransparente.png) !important;
   background-image: url(fondo.gif);
}

Como Internet Explorer 6 ignora la directriz !important, ocurrirá que tendrá en cuenta el segundo valor de background-image, ya que está repetido y por tanto sobrescribe al primero. Por ello, en este caso IE6 mostrará como fondo el archivo llamado "fondo.gif".

Los otros navegadores, como entienden !important, mostrarán el estilo que había definido anteriormente y por tanto utilizarán como fondo el archivo "fondo-semitransparente.png".

Nota: Dicho sea de paso, como IE6 tiene problemas al mostrar fondos semitransparentes (con canal alpha en el PNG) esta sería una posible técnica para conseguir que en Explorer 6 se utilice un fondo de imagen distinto (por ejemplo en .gif) que el que se utiliza en otros navegadores que no tienen problema con el .png.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

eugenio_criado

02/2/2010
Uso y efecto de la declaración !important -posible error-
No ntiendo bien el segundo ejemplo, es mas creo que os habeis equivocado en el resultado, si la primera linea donde se define la linea a 16px tiene ¡important, la segunda linea con 8px, no la tiene, la que tendria que prevalecer al final seria 16px y no 8px , de otro modo, la verdad, me parece superfluo el uso de ¡IMPORTANT.

Gracias por estar ahi.

Eugenio.

Ivan

02/2/2010
error
Si Eugenio,

esta bien lo que tu decís.
Calculo que se equivocaron...

saludos

midesweb

02/2/2010
Error corregido
Hola,

Ante todo, gracias por ayudarnos a corregir el artículo... era una errata, como apuntais correctamente.

Así pues, como important! hace que una declaración mande sobre otra, el estilo que se tiene en cuenta es el que está marcado como important!, aunque luego se pudiera sobreescribir con otra declaración.

Un cordial saludo a Eugenio e Ivan!!

Julio César Briceño Rondón

28/5/2010
Excelente manual
He leido todo el manual de Ccs. Un poco desbocado, en 2 días, pero bueno... Suficiente para tener "luces" de CSS. Muy buenas luces. Gracias por la dedicación y aporte al conocimiento. Saludos desde Venezuela.

Master Web

29/3/2011
!important
no es que este mal, lo que pasa es que en el ejemplo se demuestra que al declarar !important al atributo 16px ese tomará validez y no es remplazado con el de 8px como normalmente lo haria si no se declarase !important

jaserrano

07/3/2013
Sobre IExplorer
Hola, "desarrolladoes"

Me gustaría que apareciera la fecha de publicación del artículo. V.g. En este se dice que IExplorer 5 es tofavía muy usado y que IE 6 no muestra bien algo.

¿Realmente alguien cree que el uso de esas versiones es todavía significativo, aunque sea un poco?

¿Por qué no se refieren de paso a las versiones contemporáneas a estas de IE de otros navegadores?

¿Lo harían bien?