Juste un petit post pour les intégrateurs CSS/HTML comme moi qui sont un peu curieux 🙂 , sachez que sur tous les types de cibles CSS(balise, id, classe,:hover…) ils y en a qui seront pris en compte avant d’autres, par exemple si vous faites :
#maDiv{
background-color:blue;
}
.maDiv{
background-color:red;
}
Votre div sera au final : bleue ! Ceci s’explique par le fait que l’id a plus de “poids” (plus d’importance) que la classe dans la balance du CSS.
Le poids de chaque type d’éléments est même comptabilisé !! Voici les différents poids pour chaque types couramment utilisés :
- Le poids d’un élément (une balise) est de 1
- Le poids d’une classe est de 10.
- Le poids d’un ID est de 100.
- Le poids d’un attribut de style est de 1000.
Mais que se passe t’il si deux classes ont le même poids?
Le CSS prendra simplement en compte la dernière expression déclarée, par exemple :
.maDiv{
background-color:blue;
}
.maDiv{
background-color:red;
}
Deux poids égaux (à 10) donc la couleur rouge l’emporte car déclarée après la couleur bleue.
Plus rigolo encore : les poids peuvent être cumulés :
div.maDiv{
background-color:blue;
}
.maDiv{
background-color:red;
}
Votre div sera encore une fois : bleue ! Car le poids (10) de la classe plus le poids (1) de la balise nous donnent un bon 11 contre un simple 10 pour la classe rouge.