Docs executáveis de CSS: !important

Q: Como sobrescrever um !important?

Com outra declaração !important de especificidade maior, ou de mesma especificidade e posição posterior na folha de estilo. Um style inline com !important vence qualquer !important de folha de estilo.

Q: O !important sobrescreve estilos inline?

Sim. Uma declaração de folha de estilo com !important vence uma declaração normal em um atributo style. Ela não vence uma declaração inline que também esteja marcada com !important.

O que o !important faz

Colocar !important depois de um valor faz essa declaração vencer todas as declarações normais da mesma propriedade no mesmo elemento. A especificidade do seletor e a ordem no código deixam 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>

Sem !important, o seletor de ID venceria e o texto ficaria azul. Apague o !important no editor para ver.

Sintaxe

selector {
  property: value !important;
}

Ele vai depois do valor e antes do ponto e vírgula. Vale só para aquela declaração, não para a regra toda. Também funciona em shorthands (margin: 0 !important; deixa os quatro lados importantes) e em um atributo style.

O que vence o quê

Para os estilos escritos pelo autor da página, do mais fraco ao mais forte:

Posição	Declaração	Exemplo
1	Declaração normal em uma folha de estilo	`p { color: blue; }`
2	Declaração normal em um atributo `style`	`<p style="color: blue">`
3	`!important` em uma folha de estilo	`p { color: blue !important; }`
4	`!important` em um atributo `style`	`<p style="color: blue !important">`

Dentro da mesma posição, decide a especificidade e depois a ordem em que as declarações aparecem: vence a posterior.

Este é o único uso legítimo do dia a dia de !important: sobrescrever um estilo inline que você não pode editar, como um escrito por um widget de terceiros.

<!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>

Quando as duas declarações são !important

!important contra !important volta às regras de sempre: vence a especificidade maior e, em empate, a declaração 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>

É assim que o !important vira uma escalada: quando uma regra o usa, a regra que precisa sobrescrevê-la também tem que usar, e a especificidade volta a subir.

Especificidade CSS em uma tabela

A especificidade é o peso de um seletor. Conte três números:

Coluna	O que conta	Seletor de exemplo	Especificidade
A	Seletores de ID	`#nav`	(1,0,0)
B	Classes, atributos, pseudo-classes	`.btn`, `[type="text"]`, `:hover`	(0,1,0) cada
C	Seletores de tipo, pseudo-elementos	`p`, `::before`	(0,0,1) cada
nenhuma	`*`, combinadores (`>`, `+`, `~`, espaço)	`*`, `ul > li`	não somam nada

Compare primeiro a coluna A; só em caso de empate olhe a B e depois a C. Assim, #nav a (1,0,1) vence .menu .item .link a (0,3,1): um ID pesa mais que qualquer quantidade de classes.

<!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 tabela é o que permite evitar o !important: a maioria dos problemas de "meu CSS não está sendo aplicado" é uma regra mais específica em outro lugar, que aparece no painel Styles do DevTools com a sua declaração riscada.

Alternativas mais limpas

Iguale a especificidade e conte com a ordem. Carregue sua folha de estilo depois da biblioteca e use um seletor no mínimo tão específico quanto o dela.
Baixe a especificidade da outra regra com :where(). Tudo dentro de :where() conta como zero, então estilos base escritos com ele são fáceis de sobrescrever.
Use uma variável CSS como gancho. Um componente que lê var(--btn-bg) pode ganhar um tema sem brigar com os seletores dele. Veja variáveis 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>

Definir !important pelo JavaScript

element.style.color = 'red !important' não funciona: o valor é inválido e é ignorado. Use setProperty com um terceiro argumento:

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

Erros comuns

Colocar no lugar errado. color: !important red; é inválido; ele vai depois do valor.
Usar dentro de @keyframes. Declarações marcadas com !important dentro de keyframes são ignoradas.
Resolver todo conflito com ele. Encontre a regra vencedora no DevTools e iguale ou reduza a especificidade dela.
Esperar que afete outra propriedade. color: red !important não faz nada por background.
Esquecer que o !important inline vence o seu. Nenhuma regra das folhas de estilo da página sobrescreve style="color: red !important"; mude o próprio atributo, por exemplo com JavaScript.

Perguntas frequentes

O que o !important faz no CSS?

Ele dá a uma declaração prioridade sobre todas as declarações normais da mesma propriedade no mesmo elemento, independentemente da especificidade do seletor ou da ordem. Escreva depois do valor: color: red !important;.

Como sobrescrever um !important?

Com outra declaração !important de especificidade maior, ou de mesma especificidade e posição posterior na folha de estilo. Um style inline com !important vence qualquer !important de folha de estilo.

O !important sobrescreve estilos inline?

Sim. Uma declaração de folha de estilo com !important vence uma declaração normal em um atributo style. Ela não vence uma declaração inline que também esteja marcada com !important.

Usar !important é má prática?

Para ganhar uma briga de especificidade, sim: a próxima sobrescrita também vai precisar de !important, e a folha de estilo fica difícil de mudar. Ele é razoável em classes utilitárias que precisam valer sempre (como .hidden), para sobrescrever estilos inline de terceiros e em folhas de estilo do usuário.

Como se calcula a especificidade no CSS?

Conte três colunas: seletores de ID; depois classes, atributos e pseudo-classes; depois seletores de tipo e pseudo-elementos. Compare coluna a coluna desde o início, então #nav a (1,0,1) vence .menu .item a (0,2,1). O seletor universal * e os combinadores não somam nada.

Conceitos relacionados