!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;
}
!important: na prática
div {
background-color: blue;
}
div {
background-color: red !important;
}
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>
p {
background-color: gray;
}
p {
background-color: blue;
}
p {
background-color: orange !important;
}
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>
.primeiroParagrafo{
background-color: blue !important;
}
#segundoParagrafo {
background-color: gray !important;
}
p {
background-color: red !important;
}
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>
a {
color: red !important;
background-color: yellow;
transition: all 2s linear;
}
a:hover {
color: blue !important;
background-color: orange !important;
}
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 |
