Sélecteurs : cibler les bons éléments
10 min · Débutant · 7 août 2026
Trois façons de cibler un élément
css
p { color: navy; } /* tous les paragraphes */
.important { color: red; } /* tous les elements avec class="important" */
#titre { color: green; } /* l'element unique avec id="titre" */Astuce
Un id doit rester unique dans toute la page ; une classe se réutilise librement sur autant d’éléments que nécessaire. Au quotidien, la classe reste le sélecteur le plus flexible.
Cibler selon la position : le sélecteur descendant
css
.carte p {
color: gray;
}Un espace entre deux sélecteurs forme une relation d’imbrication : .carte p cible tout p situé à l’intérieur d’un élément .carte, à n’importe quelle profondeur, jamais les p ailleurs sur la page.
À toi de jouer
Le HTML ci-dessous contient deux paragraphes. Écris le CSS pour que le paragraphe portant la classe important s’affiche en rouge (red), sans changer l’autre.
html
<!-- HTML -->
<p class="important">Ceci est important</p>
<p>Ceci est un texte normal</p>
/* CSS */
/* Ecris ton style pour .important ici */