Spécificité

Deux règles, un élément

Bleu ou rouge ?

<p class="intro">Bienvenue sur mon site.</p>

.intro { color: blue; }
p { color: red; }

Les deux règles ciblent le même paragraphe.

Bleu

La règle la plus spécifique l’emporte.

Elle vise un groupe plus précis d’éléments.

Le sélecteur d’id

<nav id="menu">…</nav>

#menu { background: gold; }

Un dièse devant le nom. Un id est unique dans la page.

Le poids

• Un id, #menu : 1000
• Une classe, .intro : 1
• Une balise, p : 0,1
• L’étoile, * : 0

On additionne

• nav a : 0,1 + 0,1 = 0,2
• .menu a : 1 + 0,1 = 1,1
• #menu a : 1000 + 0,1 = 1000,1

Le plus lourd l’emporte, quel que soit l’ordre.

.carte .titre

• .carte .titre : 1 + 1 = 2
• div h2 span : 0,1 + 0,1 + 0,1 = 0,3

Trois balises ne pèsent pas une classe.

En cas d’égalité

Bleu ou orange ?

<p class="intro important">Bonjour</p>

.important { color: blue; }
.intro { color: orange; }

Deux classes, deux règles.

Orange

Même poids : la dernière règle écrite l’emporte.

L’ordre des classes dans class ne compte pas.

Ce que les poids nous disent

• La classe est le sélecteur par défaut.
• L’id est énorme, seul un autre id le contre.
• La balise touche tout le site, elle va nous embêter.

Duel de sélecteurs

tzi.fr/jeu-css-5