En un post anterior, ya estuvimos hablando sobre la prioridad en selectores CSS. Dejamos pendiente la aplicación de la declaración !important para saltarnos ese orden de prioridades. En este post, explicaremos que es y para que sirve el !important.

Continuaremos con el ejemplo del post anterior:

CSS

p {color: #000;}

.colorazul {color: #00F;}

#colorrojo {color: #F00;}

HTML

<p style="color:#0F0;" id="colorrojo" class="colorazul">Texto</p>

La palabra "Texto", tenía cuatro estilos CSS diferentes aplicados, pero como la prioridad la tenía el atributo inline, el texto salía de color verde.

Vamos a aplicar el atributo !important al selector con menor prioridad, en este caso p.

Modificamos nuestro CSS de esta forma: 

CSS 

p {color: #000 !important;}

.colorazul {color: #00F;}

#colorrojo {color:#F00;}

El HTML lo dejamos exactamente igual.

Si probamos este código, veremos que ahora el texto adquiere color negro. El selector p, gracias al atributo !important, se ha podido saltar todas las declaraciones del mismo atributo de los selectores con mayor prioridad.