Docs ejecutables de CSS: !important

Q: ¿Cómo se sobrescribe un !important?

Con otra declaración !important que tenga mayor especificidad, o la misma especificidad y una posición posterior en la hoja de estilo. Un style en línea con !important le gana a cualquier !important de una hoja de estilo.

Q: ¿!important sobrescribe los estilos en línea?

Sí. Una declaración de una hoja de estilo con !important le gana a una declaración normal en un atributo style. No le gana a una declaración en línea que también esté marcada con !important.

Qué hace !important

Agregar !important después de un valor hace que esa declaración gane a todas las declaraciones normales de la misma propiedad en el mismo elemento. La especificidad del selector y el orden en el código dejan de importar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

Sin !important, ganaría el selector de ID y el texto sería azul. Borra !important en el editor para verlo.

Sintaxis

selector {
  property: value !important;
}

Va después del valor y antes del punto y coma. Se aplica solo a esa declaración, no a toda la regla. También funciona en las propiedades abreviadas (margin: 0 !important; hace importantes los cuatro lados) y en un atributo style.

Qué le gana a qué

Para los estilos que escribe el autor de la página, del más débil al más fuerte:

Nivel	Declaración	Ejemplo
1	Declaración normal en una hoja de estilo	`p { color: blue; }`
2	Declaración normal en un atributo `style`	`<p style="color: blue">`
3	`!important` en una hoja de estilo	`p { color: blue !important; }`
4	`!important` en un atributo `style`	`<p style="color: blue !important">`

Dentro de un mismo nivel decide la especificidad y después el orden en que aparecen las declaraciones: gana la posterior.

Este es el único uso cotidiano legítimo de !important: sobrescribir un estilo en línea que no puedes editar, como uno que escribe un widget de terceros.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

Cuando dos declaraciones son !important

!important contra !important vuelve a las reglas de siempre: gana la especificidad más alta y, si empatan, gana la declaración posterior.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

Así es como escala !important: en cuanto una regla lo usa, la regla que debe sobrescribirla también tiene que usarlo, y la especificidad empieza a subir otra vez.

La especificidad de CSS en una tabla

La especificidad es el peso de un selector. Cuenta tres números:

Columna	Qué cuenta	Selector de ejemplo	Especificidad
A	Selectores de ID	`#nav`	(1,0,0)
B	Clases, atributos, pseudoclases	`.btn`, `[type="text"]`, `:hover`	(0,1,0) cada uno
C	Selectores de tipo, pseudoelementos	`p`, `::before`	(0,0,1) cada uno
ninguna	`*`, combinadores (`>`, `+`, `~`, espacio)	`*`, `ul > li`	no suman nada

Compara primero la columna A; solo si hay empate mira la B y después la C. Así, #nav a (1,0,1) le gana a .menu .item .link a (0,3,1): un ID pesa más que cualquier cantidad de clases.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

Entender esta tabla es lo que te permite evitar !important: la mayoría de los problemas de "mi CSS no se aplica" son una regla más específica en otro lugar, visible en el panel Styles de DevTools con tu declaración tachada.

Alternativas más limpias

Iguala la especificidad y apóyate en el orden. Carga tu hoja de estilo después de la de la librería y usa un selector al menos igual de específico.
Baja la especificidad de la otra regla con :where(). Todo lo que va dentro de :where() cuenta como cero, así que los estilos base escritos con él son fáciles de sobrescribir.
Usa una variable CSS como punto de entrada. Un componente que lee var(--btn-bg) se puede personalizar sin pelear con sus selectores. Consulta variables CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

Poner !important desde JavaScript

element.style.color = 'red !important' no funciona: el valor es inválido y se ignora. Usa setProperty con un tercer argumento:

el.style.setProperty('color', '#f59e0b', 'important');

Errores comunes

Ponerlo en el lugar equivocado. color: !important red; es inválido; va después del valor.
Usarlo en @keyframes. Las declaraciones marcadas con !important dentro de keyframes se ignoran.
Resolver todos los conflictos con él. Busca en DevTools la regla que gana e iguala o baja su especificidad.
Esperar que afecte a otra propiedad. color: red !important no hace nada con background.
Olvidar que el !important en línea le gana al tuyo. Ninguna regla de las hojas de estilo de la página puede sobrescribir style="color: red !important"; cambia el atributo en sí, por ejemplo con JavaScript.

Preguntas frecuentes

¿Qué hace !important en CSS?

Le da a una declaración prioridad sobre todas las declaraciones normales de la misma propiedad en el mismo elemento, sin importar la especificidad del selector ni el orden. Se escribe después del valor: color: red !important;.

¿Cómo se sobrescribe un !important?

Con otra declaración !important que tenga mayor especificidad, o la misma especificidad y una posición posterior en la hoja de estilo. Un style en línea con !important le gana a cualquier !important de una hoja de estilo.

¿!important sobrescribe los estilos en línea?

Sí. Una declaración de una hoja de estilo con !important le gana a una declaración normal en un atributo style. No le gana a una declaración en línea que también esté marcada con !important.

¿Usar !important es una mala práctica?

Si se usa para ganar una pelea de especificidad, sí: la siguiente sobrescritura también necesita !important y la hoja de estilo se vuelve difícil de cambiar. Es razonable en clases utilitarias que siempre deben aplicarse (como .hidden), para sobrescribir estilos en línea de terceros y en hojas de estilo del usuario.

¿Cómo se calcula la especificidad en CSS?

Cuenta tres columnas: selectores de ID; luego clases, atributos y pseudoclases; luego selectores de tipo y pseudoelementos. Compara columna por columna desde el principio, así que #nav a (1,0,1) le gana a .menu .item a (0,2,1). El selector universal * y los combinadores no suman nada.

Conceptos relacionados