Artigos HTML e CSS CSS Important

!important

O !important é uma regra do CSS utilizada para adicionar importância a uma propriedade/valor do CSS.

Esta regra substituirá todos os estilos que já foram aplicados no elemento referente a propriedade que a regra está sendo adicionada.

Veja no exemplo acima que ao aplicarmos a regra !important na propriedade color, todos os elementos <div> terão a sua cor da fonte substituída pelo valor orange.

Como utilizar a regra !important?

O !important só deve ser utilizada caso você precise substituir um estilo que não pode ser substituído de nenhuma outra maneira.

Para utilizar o !important você deve inserir a regra CSS logo após escrever o valor da propriedade que você deseja substituir o estilo, como mostra o Código 1.

// Veja neste código a regra !important sendo utilizada no segundo seletor CSS
p {
    background-color: blue;
}
p {
    background-color: red !important;
}
Código 1. Código CSS

!important: na prática

div {
  background-color: blue;
}
div {
  background-color: red !important;
}
Código 2. Propriedade !important na prática

Sintaxe

seletor {
   propriedade: valor;  /* declaração normal */
   propriedade: valor !important;  /* declaração importante */
}

Exemplos de uso do !important

Exemplo 1

Nos Códigos 3 e 4 demonstramos um exemplo utilizando a regra !important para alterar a cor de fundo de três parágrafos.

<h1>Exemplo 1 - Utilizando a regra !important</h1>

<p>Este texto é o primeiro parágrafo.</p>
<p>Este texto é o segundo parágrafo.</p>
<p>Este texto é o terceiro parágrafo.</p>
Código 3. Exemplo de código HTML
p {
  background-color: gray;
}
p {
  background-color: blue;
}
p {
  background-color: orange !important;
}
Código 4. Exemplo de código CSS

Note que no Código 4 o elemento <p> recebe primeiro a cor de fundo cinza e depois recebe a cor de fundo azul. No entanto, a cor de fundo que ficará aparente será a terceira declaração, a cor laranja.

Isso se dá por causa do uso da regra !important, que irá substituir a propriedade background-color de todas as declarações anteriores.

Exemplo 2

Nos Códigos 5 e 6 demonstramos um exemplo utilizando o !important em três elementos.

<h1>Exemplo 2 - Utilizando a regra !important</h1>

<p class='primeiroParagrafo'>Este texto é o primeiro parágrafo.</p>
<p id='segundoParagrafo'>Este texto é o segundo parágrafo.</p>
<p>Este texto é o terceiro parágrafo.</p>
Código 5. Exemplo de código HTML
.primeiroParagrafo{
  background-color: blue !important;
}
#segundoParagrafo {
  background-color: gray !important;
}
p {
  background-color: red !important;
}
Código 6. Exemplo de código CSS

Note que no Código 6 a regra !important foi utilizada em cada um dos parágrafos.

A regra !important não substitui ela mesma e por isso cada parágrafo vai receber a cor de fundo que foi estabelecida na propriedade background-color.

Exemplo 3

Nos Códigos 7 e 8 demonstraremos um exemplo utilizando o !important para alterar o estilo de um link.

<h1>Exemplo 3 - Utilizando a regra !important</h1>

<p>Clique no link ao lado para acessar o: <a href="https://www.devmedia.com.br/html-basico-codigos-html/16596">Tutorial HTML Básico</a></p>
Código 7. Exemplo de código CSS
a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}
Código 8. Exemplo de código CSS

Note que no neste exemplo, ao passar o cursor do mouse sobre o link, as propriedades color e background-color que possuem a regra !important serão alteradas após 2 segundos, recebendo assim um estilo de foco.

Compatibilidade com navegadores

O !important é suportado em todos os navegadores apresentados na tabela abaixo:

!important Chrome Mozilla Firefox Edge Opera Safari
sim sim sim sim sim