La declaración !important; en CSS, no se usa demasiado a menudo, pero es tremendamente útil. Permite declarar un atributo de forma que este tenga prevalencia sobre otras declaraciones posteriores; es decir desactiva las reglas de cascada.
No solo permite que los estilos que definamos tengan prevalencia sobre otras declaraciones CSS aunque estas sean posteriores, sino que incluso prevalecen sobre los estilos definidos en el código HTML mediante el atributo «style».
Un ejemplo de esto, ocurre en WordPress, donde el widget «Nube de Etiquetas» muestra las etiquetas con un tamaño de fuente acorde con la frecuencia que aparecen en los distintos posts. El tamaño de letra se define (en tiempo de ejecución del fichero PHP) dentro del código HTML mediante el atributo «style», quedando así:
...
<a href="http://www.integrasistemas.es/blog/tag/overlay/" class="tag-link-18" title="1 tema" style="font-size: 8pt;">Overlay</a>
...
Como vemos el código HTLM generado por el servidor indica directamente el tamaño de las letras. Pues bien, incluso en este caso, en que cualquier declaración de estilo CSS sería ignorada, el efecto de uso de !important otorga prevalencia a la declaración CSS. Lo mismo ocurre con las demás etiquetas con otros tamaños de letra.
El código CSS para mostar todos los links de la nube de etiquetas en el mismo tamaño independientemente de lo indicado por el código HTML sería el siguiente:
/* NUBE ETIQUETAS*/
div.tagcloud > a {FONT-SIZE: 12px!important;}
div.tagcloud > a:after{
content: " | ";
}
div.tagcloud > a:last-child:after{
content: "";
}
Además se añade un separador entre las etiquetas para una más fácil lectura. Se puede ver el efecto en la nube de etiquetas de nuestro Blog.
