CSS! Propriedade importante

Índice

O que é importante?

A regra !important em CSS é usada para adicionar mais importância a uma propriedade/valor do que o normal.

Na verdade, se você usar a regra !important, ela substituirá TODAS as regras de estilo anteriores para esse propriedade específica nesse elemento!

Vamos ver um exemplo:

Exemplo

#myid {
  background-color: blue;
}
.myclass {
  
  background-color: gray;
}
p {
  background-color: red !important;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

Exemplo explicado

No exemplo acima. todos os três parágrafos terão uma cor de fundo vermelha, mesmo que o seletor de ID e o seletor de classe tenham uma especificidade maior. A regra !important substitui a propriedade background-color em ambos os casos.

Importante Sobre !important

A única maneira de substituir um !important regra é incluir outro !important regra sobre uma declaração com a mesma (ou superior) especificidade no código-fonte - e aqui começa o problema! Isso torna o código CSS confuso e a depuração será difícil, especialmente se você tem uma grande folha de estilo!

Aqui criamos um exemplo simples. Não fica muito claro, quando você olha o código-fonte CSS, cuja cor é considerada mais importante:

Exemplo

 #myid {
  background-color: blue !important;
}
.myclass {
  
  background-color: gray !important;
}
p {
  background-color: red !important;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>

Dica: é bom saber sobre o !important regra. Você pode ver isso em algum código-fonte CSS. No entanto, não o use a menos que seja absolutamente necessário.

Talvez um ou dois usos justos de !important

Uma maneira de usar !important é se você precisar substituir um estilo que não pode ser substituído de nenhuma outra maneira. Isso pode acontecer se você estiver trabalhando em um sistema de gerenciamento de conteúdo (CMS) e não pode editar o código CSS. Em seguida, você pode definir alguns estilos personalizados para substituir alguns dos estilos CMS.

Outra maneira de usar !important é: Suponha que você deseja uma aparência especial para todos os botões de uma página. Aqui, os botões são estilizados em cinza cor de fundo, texto branco e algum preenchimento e borda:

Exemplo

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<p>Standard button: <a class="button" href="/html/">HTML Tutorial</a></p>

</body>
</html>

A aparência de um botão às vezes pode mudar se o colocarmos dentro de outro elemento com maior especificidade e as propriedades entram em conflito. Aqui está um exemplo disso:

Exemplo

 .button {
  background-color: #8c8c8c; 
  color: white;
  
  padding: 5px;
  border: 1px solid black; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c; 
  color: white;
  padding: 5px;
  border: 1px solid black; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>

Para "forçar" todos os botões a terem a mesma aparência, não importa o que aconteça, podemos adicionar o !important regra para as propriedades do botão, assim:

Exemplo

 .button {
  background-color: #8c8c8c !important; 
  color: white 
  !important;
  
  padding: 5px !important;
  border: 1px solid black !important; 
}
#myDiv a {
  
  color: red;
  background-color: yellow; 
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #8c8c8c !important; 
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important; 
}

#myDiv a {
  color: red;
  background-color: yellow;  
}
</style>
</head>
<body>

<p>Standard button: <a class="button" href="default.asp">CSS Tutorial</a></p>

<div id="myDiv">
<p>A link text inside myDiv: <a href="/html/">HTML Tutorial</a></p>
<p>A link button inside myDiv: <a href="/html/" class="button">HTML Tutorial</a></p>
</div>

</body>
</html>