Les poids CSS

Septembre 2016

Saviez-vous qu'en CSS, selon l'endroit où vous définissez une règle de style, celle-ci a un "poids" bien particulier ? Ceci est très important à connaitre car il peut donner lieux à des incohérences entre ce que vous pensiez obtenir, et ce que vous obtenez réellement.


Un exemple pour comprendre


Essayez le code HTML suivant :

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

Vous vous retrouvez, en toute logique, avec un super carré bleu de 100px sur 100px.
Maintenant ajoutez-lui une 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>

Le carré est devenu rouge ! La classe a pris le dessus sur l'élément.
Allez on continue avec un 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>

Notre carré est dorénavant jaune car l'ID est plus fort que la classe.
On termine avec l'ultime force : le style défini directement dans la balise :

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


Notre carré est maintenant vert : alors qu'il a, en théorie, 4 couleurs différentes imposées... Mais pourquoi ?!

Les poids


Ces résultats sont la conséquences de poids (aussi appelés règles de priorité) CSS :
  • Le poids d'un élément (une balise) est de 1
  • Le poids d'une classe est de 10.
  • Le poids d'un ID est de 100.
  • Le poids d'un attribut de style est de 1000.


Ce sont les poids élémentaires, il en existe d'autres, par exemple pour les pseudo-classes (:hover, :after, :focus ...). Finalement, l'attribut CSS :hover ne fait qu'augmenter un peu le poids d'un élément au passage de la souris ; le navigateur attribut donc automatiquement le nouveau style.

Notez que la manière dont vous définissez votre CSS, dans la head ou via des feuilles, voire des imports de feuille, joue aussi. Mais je complèterai ceci plus tard.

L'accumulation des poids


Une règle de style peut alors avoir un poids intermédiaire. En effet, ces poids se cumulent.
Exemple : reprenons l'exemple de tout à l'heure avec uniquement les classes :
<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>

Comme vous le voyez, j'ai un élément (poids 1) et deux classes égales (poids 10) : le dernier élément défini prend le dessus et notre carré reste jaune. Maintenant je rajoute sur ma classe rouge le fait qu'elle s'applique aux éléments 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>

Le carré devient rouge. Pourquoi ? Parce que ".maDiv" vaut 10 alors que "div.maDiv" cumule un élément et une classe et vaut donc 11 ! Si jamais je transformait la classe jaune en "body div.madiv" alors elle prendrait de nouveau le dessus car elle aurait un poids de 12 !

Attention : il ne suffit pas, par exemple, d'ajouter une classe quelconque à une règle pour augmenter son poids sur tous les éléments qui étaient concernés à la base. Il faut que l'ajout la classe rajoutée soit présente sur les éléments concernés !
  • .maClasse1 {} : poids 10
  • .maClasse1, .maClasse2 {} : poids 10 au maximum (pas d'accumulation).

Attention à l'écriture


Voici une erreur à ne pas commettre.
Comparer donc le résultat de ce code :

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

Avec le résultat de celui-ci :

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


Dans le premier cas notre div est bien rouge, dans le 2e cas elle est bleue !
"Quoi ? Mais normalement élément + ID = 101 donc ça devrait toujours être rouge !"

Oui mais non !
Remarquez la subtile différence :
  • div#maDiv : s'applique aux div dont l'ID est "maDiv".
  • div #maDiv : s'applique à tous les éléments dont l'ID est "maDiv" contenus à l'intérieur d'un élément parent "div".


Notre carré étant uniquement concerné par le 1er, il est logique que le 2e ne le touche pas lorsqu'il est mis en place. En règle générale, faites toujours attention à la manière dont vous écrivez vos règles, à correctement utiliser les espaces, les virgules, et les "collages".
Exemples:
  • p .maClasse a {} : pour tous les liens contenus dans n'importe quel élément dont la classe est "maClasse", le tout contenu dans n'importe quel élément <p>. Poids : 12.
  • p.maClasse, a {} : pour tous les liens et tous les <p> dont la classe est "maClasse". Poids : 11 ou 1
  • p, .maClasse, a {} : pour tous les liens et tous les éléments dont la classe est "maClasse" et tous les élément <p>. Poids : 1 ou 10 ou 1


Bref, il faut savoir jouer sur les imbrications pour obtenir facilement et proprement les effets désirés.
À vous de jouer !

A voir également :

Ce document intitulé «  Les poids CSS  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.