Damien Flandrin

Développeur Web

La spécificité des sélecteurs css

il y a 1 an · 1 MIN DE LECTURE
#CSS 

La spécificité permet à votre style css de choisir entre deux sélecteurs qui font référence à un même élément. Si vous avez deux sélecteurs sur un titre qui applique chacun un style différent à un élément, ce sera le dernier sélecteur qui sera appliqué MAIS si l'un des sélecteurs à un id ou une classe, alors l'attribut ayant la spécificité la plus élevé sera appliqué.

.title {
  color: red;
}

#title {
  color: blue;
}

h1 {
  color: green;
}

Résultat : Mon Titre

Voici le poids des différents attributs ayant une influence sur la spécificité :

  • Élément (div, span, h1, ...) : 0 , 0 , 0 , 0 , 1
  • class : 0 , 0 , 0 , 1 , 0
  • id : 0 , 0 , 1 , 0 , 0
  • l'Attribut style : 0 , 1 , 0 , 0 , 0
  • !important : 1 , 0 , 0 , 0 , 0

Comment ce calcul la spécificité ?

C'est relativement simple, vous l'avez sans doute déjà remarqué lorsque vous écrivez du CSS et que vous avez deux sélecteurs, un id et une classe sur un même élément. Le sélecteur ayant un id sera appliqué. Une classe et un id a chacun un poids qui se mesure de la façon suivante.

spécificité sélecteur css3
spécificité sélecteur css3

Si vous avez un sélecteur avec 11 classes, vous aurez une spécificité de 0,11,0 alors qu’un sélecteur ayant un id à une spécificité de 1,0,0, notre id reste quoi qu’il arrive supérieur.

Attribut !important

Parlons de la déclaration !important, si vous ne le savez pas encore, !important est une astuce pour forcer l’utilisation d’une propriété. En effet, si on analyse pourquoi, lorsque vous lui attribuer !important à la fin de votre propriété ( exemple : text-align ) le poids de votre propriété ( et non de votre sélecteur ) devient très important ( 1,0,0,0 ), voilà pourquoi en général vous pouvez forcer une propriété, toutefois je vous déconseille son utilisation car cela peut vite complexifier votre feuille de style.

spécificité sélecteur css3

···

Damien Flandrin

Je suis développeur web pour l'agence Carredas, je fais principalement du PHP avec Laravel et de l'intégration sur des projets Wordpress.
comments powered by Disqus


Développeur Web - Damien Flandrin