Sélecteurs, cascade et spécificité

Objectifs

À la fin de cette leçon, vous saurez :

• cibler des éléments avec les trois sélecteurs de base ;
• comprendre la cascade et l'héritage ;
• prévoir quel style gagne quand plusieurs s'appliquent.

Relier CSS au HTML

<link rel="stylesheet" href="styles.css">

Dans styles.css, chaque règle suit le même schéma :

selecteur {
  propriete: valeur;
}

h1 { color: navy; }
.sous-titre { font-size: 18px; }
#menu { background: #eee; }
p, li { line-height: 1.6; }

Sélecteur	Syntaxe	Cible
d'élément	h1	toutes les balises h1
de classe	.sous-titre	tous les éléments avec class="sous-titre"
d'identifiant	#menu	l'unique élément avec id="menu"

Usage courant : classes pour tout ce qui se répète ; id pour un élément unique (et pour les ancres).

La cascade : qui gagne ?

Plusieurs règles peuvent viser le même élément. Le navigateur tranche par spécificité, puis par ordre d'apparition :

id (1-0-0)  >  classe (0-1-0)  >  élément (0-0-1)

p { color: gray; }            /* 0-0-1 */
.texte-intro { color: blue; } /* 0-1-0 → GAGNE sur les <p class="texte-intro"> */
#avertissement { color: red; }/* 1-0-0 → GAGNE toujours ici */

Conseil de survie : restez sur les classes, évitez de jouer contre la spécificité. Les styles en ligne (style="...") et !important écrasent encore plus fort — à réserver aux cas exceptionnels.

L'héritage

Certaines propriétés se transmettent aux enfants : color, font-family… Définies une fois sur body, elles descendent partout :

body {
  font-family: system-ui, sans-serif;
  color: #222;
}

D'autres ne s'héritent pas : margin, border, background. C'est logique — une bordure n'a de sens que sur l'élément qui la porte.

Exercice

1. Créez styles.css lié à votre CV : police globale via body, couleur des liens, fond du header.
2. Ajoutez une classe .encadre appliquée à deux éléments différents : vérifiez qu'elle touche les deux.
3. Faites volontairement conflit : p { color: black } puis .intro { color: green } sur <p class="intro">. Qui gagne ? Pourquoi ?

Résumé

• Élément / classe / id : trois forces différentes.
• Cascade = spécificité puis ordre ; héritage = transmission verticale.
• Classes par défaut, spécificité minimale : le CSS reste lisible.