CSS : poids des sélecteurs

Le CSS peut être considéré comme un langage chaotique par certaine personne, Mais en y regardant de plus près le CSS obéit à des règles bien particulières.

Il nous est tous arrivé d’utiliser une librairie tel que Bootstrap par exemple et de voir notre style se faire surcharger par le style de la librairie. La question qui se pose est comment savoir quelle règle va s’appliquer ?

Avant de se plonger dans les arcanes du CSS, il est bon de savoir deux choses :

  • plus un élément stylisé sera « lourd », plus il y à de chance que le style s’applique
  • L’inspecteur web montre les style appliqué par ordre d’importance

Poids des sélecteurs

Pour déterminer le poids d’un sélecteur css par rapport à un autre, il vous suffit de remplir le tableaux ci-dessous :

!important Dans l’attribut style Nb #id Nb .class Nb Balise
Ciblage a 0 0 0 0 0
Ciblage b 0 0 0 0 0

Dans Attribut style : mettre « 1 » si vos propriétés sont dans un attribut style.
nb #ID : mettre le nombre d’id qui constitue votre chemin de ciblage.
Nb .class : mettre le nombre de class qui constitue votre chemin de ciblage.
Nb Balise : mettre le nombre de balises qui constitue votre chemin de ciblage.

Une fois le tableau remplie pour vos ciblages à comparer, vous pouvez les comparer. L’importance se fait par colonne de gauche à droite. Si il n’y a pas égalité, c’est la valeur la plus grande qui l’emporte; sinon, je passe à la colonne de droite suivante. Si les poids sont strictement égaux c’est la cascade qui permettra de savoir quel style s’applique.

Vous trouverez plus bas plusieurs exemples à un, deux sélecteurs ou plus.

Sélecteurs css particuliers

Quelques informations sur la valeur de certain sélecteur css :
p.maclass : compte 1 pour la balise et 1 pour la class
p#monId : compte 1 pour la balise et 1 pour l’id
body > p : compte 2 pour la balise et « < » n’est pas pris en compte.
div + div.maclass{...} compte 2 pour la balise et 1 pour la classe et « + » n’est pas pris en compte.
p:first-line : compte 2 pour la balise.
p:first-child : compte 1 pour la balise et 1 pour la class.
p[id="monId"] : compte 1 pour la balise et 1 pour la class, quelque soit la valeur de l’attribut [att=valeur] correspond a une classe.
* : compte n’est pas pris en compte.

Attention si vous avez ! dans une de vos propriétés cela change les règles car elle est prioritaire sur toutes les règles de ci-dessus.

 

récapitulatif en image : CSS Specify

source : Zone CSS

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.