Le but de ce chapitre de comprendre le poids des sélecteurs css.
Connaître le poids de votre sélecteur par rapport a un autre, n'est utile que dans le cas où l'on surcharge la css.
Surcharger la css, c'est à dire que l'on ajouter des propriétés de feuilles de style ou écraser des propriétés de feuilles de style, 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 compte , si l'on veut modifier un propriété déjà existante dans certain cas les éléments héritent dans d'autre pas, nous allons essayer de démêler 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
Dans l'exemple suivant 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 en non au ciblage), il vous suffit d'aller trouver l'information dans la définition de la propriété css dans la partie "Héritage".

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

	Dans l'attribut style	Nb #id	Nb .class	Nb Balise
Ciblage a	0	0	0	0
Ciblage b	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 a 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.

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

Quelques informations la valeur de certain sélecteur css :
p.maclass : compte 1 pour la balise et 1 pour la classe
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 classe.
p[id="monId"] : compte 1 pour la balise et 1 pour la classe, quelque soit la valeur de l'attribut [att=valeur] correspond a une classe.
* : compte n'est pas pris en compte.

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

Quoi qu'il arrive pour un ciblage et propriétés css identiques, c'est les propriétés css de l'id qui prennent le dessus. Vous pouvez inverser les déclarations, ou les attributs cela ne changera rien.
Code CSS :

Code HTML :

Résultat :

Les propriétés css de l'id écrasent celles de la classe

Quoi qu'il arrive pour un ciblage et propriétés css identiques, c'est les propriétés css de l'id qui prennent le dessus. Vous pouvez inverser les déclarations css cela ne changera rien.
Code CSS :

Code HTML :

Résultat :

Les propriétés css de l'id écrasent celles de la balise

Quoi qu'il arrive pour un ciblage et propriétés css identiques, c'est les propriétés css de la class qui prennent le dessus. Vous pouvez inverser les déclarations css cela ne changera rien.
Code CSS :

Code HTML :

Résultat :

Les propriétés css de la classe écrasent celles de la balise

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.
Code HTML :

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 de d'annuler la première déclaration de bordure verte.

Premier exemple de sélection css :


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.
Second exemple de sélection css :


La première déclaration prend le dessus, vous pouvez inverser l'ordre cela sera toujours le cas.
Troisième exemple de sélection css :

Résultat :

La deuxième déclaration prend le dessus, vous pouvez inverser l'ordre cela sera toujours le cas.

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

Résultat :

Le second ciblage ne prend pas le dessus quelque soit l'ordre des déclaration 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 cibles dans les deux cas on ajoute les balises intermédiaires.
Code CSS :

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 cibles dans les deux cas on ajoute les balises intermédiaires.
Code CSS :

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.

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 le div fils du div suivant.
Code CSS :

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.
Code HTML :

Code CSS :

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.