Gorille gris

Comment bien calculer le poids d'un selecteur CSS

Voici un article qui vous expliquera le poids des CSS. Cela est utile quand vous voulez surcharger un style, comprendre quel style s'applique à quel élément et pourquoi un style s'applique plutôt qu'un autre.

Quand vous reprenez un projet existant, qui date déjà un peu, vous vous retrouvez souvent avec des déclarations CSS à rallonge et ne savait plus quoi s’applique à quoi.

.container .info.test .spanner .wrapper .block div.pictos #jailanausee { color : #000; }

Pour éviter je genre de massacre, il est d’une extrème importance de comprendre quel style va s’appliquer à quel élement, et dans quel ordre.
Prenons un exemple. Parmi ces quelques déclarations, laquelle va remporter le combat et s’appliquer au span. Quelle va être la couleur du texte du span : rouge, bleu, vert ou jaune ?

#idSpan { color: red; }
span.class-span { color: orange; }
.bloc.info span { color: yellow; }
.container .bloc.info .class-txt span.class-span { color: green; }
span { color: blue !important }
<div class="container">
	<div class="block info">
		<span class="class-span" id="idSpan" style="color:purple;">
			je suis d'une certaine couleur
		</span>
	</div>
</div>

La réponse est bleu ! La preuve ici.

Voici un court explicatif de l’ordre d’application des styles sur le span.

!important attribut style (style="") nombre d'id (#) nombre de classes (.) nombre de balises
gagne sur tous les autres style, même seul 0 .. n 0 .. n 0 .. n 0 .. n

Au final, vous vous trouvez avec un chiffre entre 0 et 19999. Reprenons notre exemple de départ. Sachant que l’attribut style s’applique toujours et annule les autres, nous allons nous en affranchir pour l’exemple.

Déclaration CSS `!important` nombre d'id (#) nombre de classes (.) nombre de balises poids
#idSpan 0 1 0 0 0100
span.class-span 0 0 1 1 0011
.bloc.info span 0 0 2 1 0021
.container .bloc.info .class-txt span.class-span 0 0 5 1 0051
span (avec !important) 1 0 0 1 1001

Au final vous voyez l’ordre d’importance se déssiner :

  1. span (avec !important) /* 1001 */
  2. \#idSpan /* 0100 */
  3. .container .bloc.info .class-txt span.class-span /* 0051 */
  4. .bloc.info span /* 0021 */
  5. span.class-span /* 0011 */

1001 > 100 > 51 > 21 > 11