CSS !important: Guia de Uso

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

See the Pen CSS Important - Exemplo inicial by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen CSS Important - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen CSS Important - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen CSS Important - Exemplo 3 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

CSS Important

Nesta documentação você aprenderá sobre a regra !important e como utilizá-la no CSS para substituir estilos anteriores de um determinado elemento.