[ad_1]
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.
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.
···
[ad_2]
