Os pesos CSS

Junho 2017


Você sabia que em se falando de CSS, e de acordo com o lugar onde você define uma regra de estilo, esta tem um peso muito particular ? Isto é importante saber, pois pode provocar incoerência entre aquilo que você pensa obter e aquilo que você obtém realmente.

Um exemplo para compreender


Tste o código seguinte HTML:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
      </style>  
  </head>  
  <body>  
      <div style="width:100px; height:100px;"></div>  
  </body>  
</html>

Você reencontra, em toda lógica, com um grande quadrado azul de 100px por 100px.
Agora, adicione uma classe:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          .maDiv {background-color:red;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>

O quadrado ficou vermelho! A classe se sobrepôs ao elemento.
Vamos avançar, agora, com um ID :

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          .maDiv {background-color:red;}  
          #maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" id="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>

Nosso quadrado é, daqui para frente, amarelo, pois é mais forte que a classe.
Termina-se com a última força: o estilo definido diretamente na baliza :
<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          .maDiv {background-color:red;}  
          #maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" id="maDiv" style="width:100px; height:100px; background-color:green;"></div>  
  </body>  
</html>


Nosso quadrado ficou agora verde: quando ele tem, em teoria, 4 cores diferentes impostas... Mas por que?

Os pesos


Estes resultados são a conseqüência de pesos (também chamados regras de prioridade)à CSS :
  • O pesode um elemento (uma baliza) é de 1
  • O peso de uma classe é de 10.
  • O peso de um ID é de 100.
  • O peso de um atributo de estilo é de 1000.


São os pesos elementares, existem outros, por exemplo, para os pseudo-classes (:hover, :after, :focus ...). Finalmente, o atributo CSS :hover só aumenta um peso de um elemento com a passagem do mouse ; o navegador atributo então automaticamente o novo estilo.

Note que a maneira que você define seu CSS, na head ou via folhas, ou importação de folhas, faz assim. Mas, eu completarei isto mais abaixo.

O acumulo dos pesos


Uma regra de estilo pode, então, ter um peso intermediário. Com efeito, estes pesos se acumulam.
Exemplo : retomemos o exemplo acima com uma única classe :
<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          .maDiv {background-color:red;}  
          .maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>

Como você observa, tenho um elemento (peso 1) e duas classes iguais (peso 10) : o último elemento definido se sobrepõe, e nosso quadrado fica amarelo. Agora adiciono sobre minha classe vermelha o fato que ela se aplica aos elementos div
<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          div.maDiv {background-color:red;}  
          .maDiv {background-color:yellow;}  
      </style>  
  </head>  
  <body>  
      <div class="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>

O quadrado torna-se vermelho. Por que? Porque ".maDiv" vale 10 enquanto que "div.maDiv" acumula um elemento e uma classe e vale, assim, 11 ! Se a classe amarela se transformasse em "body div.madiv" então ela se sobreporia novamente, pois ela teria o peso de 12 !

Atenção : não basta, por exemplo, adicionar uma classe qualquer em uma regra para aumentar seu peso em todos os elementos que estão implicados na base! É preciso que o adicionado da classe adicionada esteja presente nos elementos implicados !
  • .minhaClasse1 {} : peso10
  • .minhaClasse1, .minhaClasse2 {} : peso 10 no máximo (sem acumulo).

Atenção a forma da escrita


Eis um erro que não se deve cometer.
Comparar então o resultado deste código:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          div#maDiv {background-color:red;}  
      </style>  
  </head>  
  <body>  
      <div id="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>

Com o resultado deste aqui abaixo:

<html>  
  <head>  
      <style>  
          div {background-color:blue;}  
          div #maDiv {background-color:red;}  
      </style>  
  </head>  
  <body>  
      <div id="maDiv" style="width:100px; height:100px;"></div>  
  </body>  
</html>


Neste primeiro caso nosso div estão vermelho, nos 2 casos ela é azul!
"O que? Mas, normalmente elemento + ID = 101 então deveria ser sempre vermelho!"

Sim, mas não!
Note a sutil diferença:
  • div#maDiv : se aplica aos div cujo 'ID é "maDiv".
  • div #maDiv : se aplica a todos os elementos cujo ID é "maDiv" contidos no interior de um elemento parente "div".


Nosso quadrado sendo unicamente implicado pelo 1° é lógico que o 2° não o toque quando ele foi descartado. Em regra geral, tenha sempre cuidado com a maneira que você escreve suas regras, use completamente os espaços, as vírgulas, e as « colagens ».
Exemplos:
  • p .minhaClasse a {} : para todos os links contidos em qualquer elemento cuja a classe é « minhaclasse », o todo contido em qualquer <p>. Peso : 12.
  • p.minhaClasse, a {} : pour tous les liens et tous les <p> dont la classe est "maClasse". Poids : 11 ou 1
  • p, .minhaClasse, a {} : para todos os links e todos os elementos cuja classe é "minhaClasse" e todos os elementos <p>. Peso : 1 ou 10 ou 1


Resumindo, é preciso saber se movimentar com as regrinhas para obter facilmente e corretamente os efeitos desejados.

Está tudo com você!

Tradução feita por Ana Spadari

Veja também

Artigo original publicado por . Tradução feita por ninha25. Última modificação: 28 de outubro de 2011 às 07:41 por ninha25.
Este documento, intitulado 'Os pesos CSS', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.