Le poids des styles, des règles ou des déclarations

De part leur aspect en cascade, les feuilles de style vont s’appliquer par couche sur les éléments et avoir des couches d’informations qui vont se superposer. De même, il arrive que plusieurs règles différentes pointent vers le même élément, ou encore les styles appliqués aux balises parents, qui vont s’hériter tout au long de l’arborescence. De ce fait, il est fréquent que des instructions contraires puissent s’appliquer sur le même élément. Comment trancher, et qui aura le dernier mot ?

Trois règles vont devoir s’appliquer, l’effet de cascade, le poids des sélecteurs et la notion d’importance d’une déclaration.

En ce qui concerne l’effet cascade, les styles appliqués au plus proche de l’élément prévalent sur les styles appliqués plus en amont. Dit autrement, à poids égal, c’est le dernier qui parle qui a raison… ce qui nous emmène à la seconde notion, le poids d’un sélecteur. Le poids d’un sélecteur est facile à calculer, bien qu’une confusion, ou plutôt un amalgame, puisse parfois être fait. Chaque élément du sélecteur pèse un poids en fonction de sa nature ;

• une balise vaut 0,0,0,1
• une classe vaut 0,0,1,0
• un identifiant vaut 0,1,0,0
• l’attribut style vaut 1,0,0,0

Afin d’éviter cet amalgame, il est important de noter la présence de la virgule entre chaque unité… en fait, il ne s’agit pas là d’unités, dizaines, centaines et miliers, mais de valeur de poids dans des catégories distinctes et hiérarchisées. Par exemple, voyons le poids des sélecteurs suivants ;

• p strong pèse 0,0,0,2 et non pas 2
• p.classe ou .classe p pèsent tous les deux 0,0,1,1 et non pas 11

Le plus lourd, donc le sélecteur qui placera sa règle en priorité, sera celui qui aura le poids le plus lourd en terme de rang A, B, C, D et non pas en addition algébrique. Le plus simple pour le démontrer sur le peu probable fragment de code suivant ;

<section>
  <article>
    <aside>
      <header>
        <div>
          <blockquote>
            <p>
              <strong><em><span>coucou</span></em></strong>
            </p>
          </blockquote>
        </div>
      </header>
    </aside>
  </article>
</section>

Voyons, quel serait le poids des sélecteurs suivants ;

• .poids pèse 0,0,1,0 et non 10
• body section article aside header div blockquote p strong em span pèse 0,0,0,11 et non 11

… donc 0,0,1,0 est plus lourd que 0,0,0,11, car il a un niveau plus haut dans la hiérarchie, et non pas algébriquement avec 11 qui serait plus lourd que 10… C’est donc le sélecteur .poids qui appliquera sa règle à l’élément.

Une dernière particularité pour ‘alourdir’ une déclaration, est l’instruction !important qui se place juste avant la fermeture de la déclaration ;

propriété : valeur !important ;

Toute déclaration qui est ainsi configurée passe devant toute autre déclaration concernant une propriété identique pour ce même élément, et ce, quel que soit le poids des règles qui les définissent. Le seul critère retenu, si deux déclarations usent de l’instruction !important, sera l’ordre d’apparition de la règle dans la feuille de style. Donc, si nous reprenons l’exemple précédent, cette fois-ci bien que la règle définie par la classe soit plus forte, c’est l’instruction de la règle aux 11 balises qui sera effective, et l’élément sera rouge;

body section article aside header div blockquote p strong em span { 
	color: red!important; 
} 
.poids { 
	color: green; 
}