JMiur [E]

La palabra !important es algo que podemos agregar al final de una propiedad CSS y que realza cierto valor para, de esta forma, obligar a que se ignore una declaración y forzar un cambio.

Un ejemplo:
<a style="color: red !important;" href="javascript:void(0);">UN ENLACE ROJO</a>
Generalmente, los gadgets que agregamos incluyen ciertas propiedades sobre las cuales no tenemos control alguno así que podemos intentar sobrescribirlas usando esta palabra clave ya que nada impide usarla de manera inversa, es decir, declarando una propiedad ANTES que la otra. Explicación confusa pero veamos un ejemplo para probarlo de manera dramática.

La clase .post-body es la que por defecto, controla las propiedades de la entradas del blog. Podemos definirle una fuente de texto:
.post-body {
font-family: Arial;
}
Si vamos al editor de entradas y allí escribimos algo, podemos formatearlo, cambiándole la fuente. El resultado será algo así:
<span style="font-family:courier new;">Integer vitae quam lectus! Donec sodales</span>
De ese modo, esa parte tendrá una fuente diferente a la definida por defecto. Primero decimos que es Arial y luego decimos que es Courier así que para el navegador, vale esta última porque SIEMPRE, las definiciones de estilo agregadas directamente a una etiqueta, tienen prioridad a las agregadas en la hoja de estilo. Pero ¿qué pasa si cambiamos la definición inicial y ponemos?:
.post-body span {
font-family: Arial !important;
}
Pués entonces, sea lo que sea que pongamos en el editor, la fuente se mostrará en Arial y el navegador usará siempre esa fuente, aunque luego le digamos lo contrario.

Otro ejemplo:
a {color: red;}
a {color: blue;}
los enlace serán azules pero así:
a {color: red !important;}
a {color: blue;}
los enlace serán rojos.

Si bien la definiciones CSS se ejecutan de manera secuencial y la última sobrescribe a la anterior, hay una excepción y es cuando se encuentra una propiedad con la palabra !important. En ese caso, todas las demás declaraciones son ignoradas y lo único que podemos hacer para cambiar esto es agregarle esa palabra extra así que en el post de ejemplo, deberíamos escribir:
<span style="font-family:courier new !important;">Integer vitae quam lectus! Donec sodales</span>
Es por eso que debemos ser prudentes con el uso de esta palabra y sólo aplicarla cuando es absolutamente necesario ya que sino, nos veremos en problemas a la hora de corregir algo.

10 comentarios:

Unknown  

Fantastico! mira por donde me entero de que significa esa propiedad, a veces las cosas más evidentes no se explican porque erroneamente se piensa que todo el mundo las debes saber y sin embargo en multitud de ocasiones esto no es así.

Gracias JMiur!

Responder
Unknown  

Si que la he visto, tal vez en algo que me has ayudado, pero no sabía el por qué...mira vos.

Buen viernes :)

Responder
Gra  

Guauu!!!
Por fin me entero!!!
Gracias !!!!

Responder
Oloman  

A mí se me olvidó incluirlo en los ejemplos de en un post de hace unos días y claro, el estilo era el del CSS de la plantilla. Hasta que me dí cuenta, pasó un rato :S

Responder
Giuseppe Beghelli  

Hola Jmiur, quisiera que me hecharas una ayuda porque no se como resolver un problemita que tengo en mi blog. Todos los link en mi blog tienen un color de background en hover y por supuesto tambien la imagen cuando tienen ul link. Quisiera quitarle ese background en la imagen porque en Internet Explorer cuando le voy encima con el raton se me desliza la pagina por abajo. Lo puedes ver aqui http://www.giuseppebeghelli.it/portfolio/
He intentado con a.img:hover (background:none !important;) pero nada y no se como hacer.
Gracias de antemano.
Un fiel seguidor de tu blog.
Giuseppe

Responder
JMiur  

Giuseppe:

Entiendo el problema pero no sé como resolverlo.

Lo que ocurre es que a:hover {....} afecta a todos los enlaces pero a:hover img {....} o a img:hover {....} afectan a la imagen pero no al enlace A. Esto es medio confuso de explicar :(

No se me ocurre una forma de indicarle propiedades a esos enlaces, salvo que te tomes el trabajo de crear una clase específica para eso, algo así:

a.sinfondo {background: none !important;}

<a class="sinfondo" href="#"> <img src="xxxx" /> </a>

Responder
Giuseppe Beghelli  

Gracias por la ayuda ahora con la clase se resolvio.

Responder
JMiur  

Bueno, me alegro que eso te fuera útil. Seguramente, debe haber alguna otra solución pero, por más que he buscado, no he encontrado otro modo :)

Responder
Maite  

Me ha sido muy util para hacer visible un menú que estaba escondido bajo la cabecera ;) ya sabes. Gracias a ti y a tu "important" !!!!

Responder
JMiur  

important es importante :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR