CSS !importantRegla

¿Qué es !important?

La regla !important en CSS se utiliza para aumentar el peso de un estilo.

!importantNo está relacionada con la prioridad, pero está directamente relacionada con el resultado final. Cuando se usa una regla !important, esta declaración anulará cualquier otra declaración.

Ejemplo

#myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; }

Pruébalo »

En el ejemplo anterior, aunque el selector de ID y el selector de clase tienen mayor prioridad, el color de fondo de los tres párrafos se muestra en rojo, porque la regla !important anula la propiedad background-color.

Nota importante

Usar !important es un mal hábito y se debe evitar en la medida de lo posible, ya que rompe las reglas de cascada inherentes a las hojas de estilo, lo que hace que sea más difícil depurar y encontrar errores.

Cuando dos declaraciones en conflicto con reglas !important se aplican al mismo elemento, se adoptará la declaración con mayor prioridad.

En el siguiente ejemplo, al revisar el código fuente CSS no queda muy claro qué color es el más importante:

Ejemplo

#myid { background-color: blue !important; } .myclass { background-color: gray !important; } p { background-color: red !important; }

Pruébalo »

Recomendaciones de uso:

  • Siempredebe priorizar el uso de la prioridad de las reglas de estilo para resolver problemas en lugar de!important
  • Soloen páginas específicas donde se necesite sobrescribir CSS global o externo!important
  • Nuncaen tus plugins!important
  • Nuncaen el código CSS de todo el sitio!important

Cuándo usar !important

Si deseas establecer un estilo CSS global en tu sitio web, puedes usar !important.

Por ejemplo, si queremos que todos los botones del sitio tengan el mismo estilo:

Ejemplo

.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; }

Pruébalo »

Si colocamos el botón dentro de otro elemento con mayor prioridad, la apariencia del botón cambiará y las propiedades entrarán en conflicto, como en el siguiente ejemplo:

Ejemplo

.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } #myDiv a { color: red; background-color: yellow; }

Pruébalo »

Si queremos que todos los botones tengan la misma apariencia, podemos agregar la regla !important a las propiedades de estilo del botón, como se muestra a continuación:

Ejemplo

.button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid black !important; } #myDiv a { color: red; background-color: yellow; }

Pruébalo »
Otras extensiones