Poids des sélecteurs Css - Les cours Css

Les héritages de ciblage Css

Le poids du sélecteur Css influence l'héritage d'une propriété Css

Le but de ce chapitre de comprendre le poids des sélecteurs Css.
Connaître le poids de votre sélecteur Css par rapport à un autre, n'est utile que dans le cas où l'on surcharge la Css.
Surcharger la Css, c'est-à-dire que l'on ajoute des propriétés de feuilles de style ou qu'on redéfinit des propriétés de feuilles de style à un élément, c'est ce cas qui nous intéresse dans ce chapitre.
En effet, dans le cas où nous ajoutons une propriété, il n'y a pas de notion de poids du sélecteur. Par contre, si l'on veut modifier une propriété déjà existante dans certain cas les éléments héritent, dans d'autres ils n'héritent pas. C'est le poids qui va déterminer cet héritage, nous allons essayer de comprendre tout cela.

Dans ce chapitre, je parle de cible et chemin :
C'est le chemin que vous utilisez pour assigner une ou des propriétés de feuilles de styles Css. La cible c'est l'élément auquel vous voulez assigner les propriétés Css.
Le chemin est composé d'un ou plusieurs sélecteurs Css.
Dans l'exemple suivant, le chemin c'est #menusecondaire #menu a et la cible, c'est "a" :

Pour l'héritage même des propriétés , c'est-à-dire liée à la propriété Css et à son héritage par rapport à son parent, il vous suffit d'aller trouver l'information dans la définition de la propriété Css dans la partie "Héritage".

La règle du poids des sélecteurs Css

Comment utiliser la règle du poids?

Pour déterminer le poids d'un sélecteur Css par rapport à un autre, il vous suffit de remplir le tableau ci-dessous :

Dans Attribut style : mettre en poids "1" si vos propriétés sont dans un attribut style.
nb #ID : mettre en poids le nombre d'id qui constitue votre chemin de ciblage.
Nb .class : mettre en poids le nombre de class ou pseudo-classes qui constitue votre chemin de ciblage.
Nb Balise : mettre en poids le nombre de balises ou pseudo-éléments qui constitue votre chemin de ciblage.

Une fois le tableau remplie pour vos ciblages à comparer, vous pouvez comparer leurs poids. L'importance se fait par colonne de gauche à droite. S'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 chemins ont des poids identiques dans chaque colonne, alors c'est la dernière déclaration de la propriété Css qui est prise en compte.

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

Poids de 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 class et "+" n'est pas pris en compte.
p:first-line : compte 1 pour la balise et compte 1 pour la balise, car les pseudo-éléments sont considérés comme balise.
p:first-child : compte 1 pour la balise et 1 pour la class. Les pseudo-classes sont considérées comme class.
p[id="monId"] : compte 1 pour la balise et 1 pour la class, quelle que soit la valeur de l'attribut [att=valeur] correspond a une classe.
p:not(.maclass) : compte 1 pour la balise et 1 pour la class. La négation ne compte pas en elle-même, mais son contenu oui.
* (sélecteur Css universel) : compte n'est pas pris en compte.

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

Ciblage à un sélecteur Css

Poids du sélecteur Css : id vs. class

Quoi qu'il arrive, pour un ciblage et propriétés Css identiques, c'est les propriétés Css du sélecteur Css d'id qui prennent le dessus sur les propriétés Css du sélecteur Css de class. Vous pouvez inverser les déclarations, ou les attributs cela ne changera rien.

.class-css{ /* 0|0|0|1|0 */
  border:1px solid green;
} 
#id-css{ /* 0|0|1|0|0 */
  border:1px solid red;
} 

<p id="id-css" class="class-css">
Les propriétés css de l'id écrasent celles de la classe
</p>

Résultat :

Poids du sélecteur Css : id vs. balise

Quoi qu'il arrive, pour un ciblage et propriétés Css identiques, c'est les propriétés Css du sélecteur Css d'id qui prennent le dessus sur les propriétés Css du sélecteur Css de balise HTML. Vous pouvez inverser les déclarations Css, cela ne changera rien.

q{ /* 0|0|0|0|1 */
  border:1px solid green;
} 
#id-css{ /* 0|0|1|0|0 */
  border:1px solid red;
} 

<q id="id-css">
Les propriétés css de l'id écrasent celles de la balise
</q>

Résultat :

Poids du sélecteur Css : balise vs. class

Quoi qu'il arrive pour un ciblage et propriétés Css identiques, c'est les propriétés Css du sélecteur Css de class qui prennent le dessus sur les propriétés Css du sélecteur Css de balise HTML. Vous pouvez inverser les déclarations Css, cela ne changera rien.

q{ /* 0|0|0|0|1 */
  border:1px solid green;
}
.class-css{ /* 0|0|0|1|0 */
  border:1px solid red;
}

<q class="class-css">
Les propriétés css de la classe écrasent celles de la balise
</q>

Résultat :

Ciblage à un deux sélecteurs Css

Comprendre le poids quand le chemin à deux sélecteurs Css

Voici quelques exemples pour illustrer les règles d'héritage liées au ciblage avec deux sélecteurs.
Pour cela nous utiliserons la structure HTML suivante.

<div id="id-conteneur" class="class-conteneur">
  <div id="id-contenant" class="class-contenant">
    <div id="id-contenu" class="class-contenu">
      <div id="id-paragraphe" class="class-paragraphe">
        <div id="id-paragraphecont" class="class-paragraphecont">
          <div id="id-texte" class="class-texte"> mon texte </div>
        </div>
      </div>
    </div>
  </div>
</div>

Dans tous les exemples suivant nous essayerons d'appliquer une bordure rouge à la dernière balise dont l'identifiant (id) est id-texte en essayant d'annuler la première déclaration de bordure verte.

Les exemples de poids à deux sélecteurs Css

Premier exemple de sélection Css :

#id-paragraphecont div{ /* 0|0|1|0|1 */ 
  border:1px solid green;
} 
div #id-texte{ /* 0|0|1|0|1 */
  border:1px solid red;
}

Les deux déclarations ont un schéma de force identique (0|0|1|0|1), c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.
Second exemple de sélection Css :

/* Déclaration 1 */
#id-paragraphecont div{ /* 0|0|1|0|1 */
  border:1px solid green;
}
/* Déclaration 2 */
div .class-texte{ /* 0|0|0|1|1 */
  border:1px solid red;
}

Les deux déclarations sont de force identique mais ont un tableau de force différent (x|x|x|x|x).
La règle qui s'appliquera sera la première règle qui est la plus forte. Il faut comparer chaque colonne de gauche à droite.
Dans notre cas, c'est id de la "Déclaration 1" qui prend le dessus, vous pouvez inverser l'ordre cela sera toujours le cas.

Troisième exemple de sélection css :

/* Déclaration 1 */
#id-paragraphecont div{  /* 0|0|1|0|1 */
  border:1px solid green;
}
/* Déclaration 2 */
.class-paragraphecont #id-texte{ /* 0|0|1|1|0 */
border:1px solid red;
}

Résultat :

Les deux déclarations sont de force identique mais ont un tableau de force différent (x|x|x|x|x).
La deuxième déclaration prend le dessus, car c'est la classe qui prend le dessus , vous pouvez inverser l'ordre cela sera toujours le cas.

Le ciblage à plusieurs sélecteurs Css

Les exemples poids à plusieurs sélecteurs Css

Premier exemple, le premier ciblage se fait directement sur l'id et le second se fait en spécifiant toutes les balises parentes.

#id-texte{ /* 0|0|1|0|0 */ 
  border:1px solid green;
}
div div div div #id-texte{ /* 0|0|1|0|4 */ 
  border:1px solid red;
}

Résultat :

Le second ciblage prend le dessus quel que soit l'ordre des déclarations des ciblages.

Second exemple, le premier ciblage se fait en précisant le premier id et le second se fait en précisant l'id de la cible dans les deux cas, on ajoute les balises intermédiaires.

#id-conteneur div div div div{ /* 0|0|1|0|4 */ 
border:1px solid green;
}
div div div div #id-texte{ /* 0|0|1|0|4 */ 
border:1px solid red;
}

Résultat :

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.

Troisième exemple, le premier ciblage se fait en précisant le premier id et le second se fait en précisant l'id de la cible dans les deux cas on ajoute les balises intermédiaires.

div #id-contenant div div div{ /* 0|0|1|0|4 */ 
  border:1px solid green;
}
div div div div #id-texte{ /* 0|0|1|0|4 */
  border:1px solid red;
} 

Résultat :

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.

Sélecteurs Css particuliers

Premier exemple, le premier ciblage se fait en précisant le premier id et deux balises intermédiaires et le second se fait en précisant le premier id et en ciblant le div fils du div suivant.

#id-paragraphe div div{ /* 0|0|1|0|2 */ 
  border:1px solid green;
}
#id-paragraphe div > div{ /* 0|0|1|0|2 */ 
  border:1px solid red;
}

Résultat :

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.

Deuxième exemple, le premier ciblage se fait en ciblant le div adjacent et le second de manière classique.

<div id="id-conteneurdd" class="class-conteneurdd">
    <div id="id-contenantdd" class="class-contenantdd">
      <div id="id-contenudd" class="class-contenudd">
        <div id="id-paragraphedd" class="class-paragraphedd"></div>
        <div id="id-textedd" class="class-textedd">Je suis encadré de rouge </div>
      </div>
    </div>
</div>

#id-contenu .class-paragraphe div + div{ /* 0|0|1|1|2 */ 
  border:1px solid red;
}
#id-conteneur div div .class-texte{ /* 0|0|1|1|2 */ 
  border:1px solid green;
} 

Résultat :

Les deux déclarations sont de force identique, c'est la dernière déclaration prend le dessus, vous pouvez inverser l'ordre cela changera le résultat.