Chapitre 2 : Les Sélecteurs CSS
Maîtrisez les différents types de sélecteurs pour cibler précisément les éléments HTML à styliser.
1. Qu'est-ce qu'un sélecteur CSS ?
Un sélecteur CSS permet de cibler des éléments HTML pour leur appliquer un style. C'est la première partie d'une règle CSS, avant les accolades {}.
p {
color: blue;
}
color: blue;
}
Ici, le sélecteur est p : la règle s'appliquera à tous les paragraphes de la page.
2. Les sélecteurs de base
2.1 Par type (élément HTML)
Sélectionne tous les éléments d'un certain type :
h1 {
font-size: 32px;
}
font-size: 32px;
}
2.2 Par classe
Utilise un point . suivi du nom de classe :
.important {
color: red;
}
color: red;
}
HTML :
<p class="important">Ceci est important</p>
2.3 Par identifiant (ID)
Utilise le symbole # suivi du nom de l'ID :
#entete {
background-color: lightblue;
}
background-color: lightblue;
}
HTML :
<div id="entete">Titre du site</div>
3. Les sélecteurs combinés
3.1 Sélecteur descendant
Cible un élément contenu dans un autre :
article p {
color: darkgreen;
}
color: darkgreen;
}
3.2 Sélecteur enfant direct
ul > li {
list-style-type: square;
}
list-style-type: square;
}
3.3 Sélecteur de frère suivant
h2 + p {
font-style: italic;
}
font-style: italic;
}
4. Les sélecteurs d'attributs
input[type="text"] {
border: 1px solid #ccc;
}
border: 1px solid #ccc;
}
Cible tous les champs de type texte.
5. Les pseudo-classes
5.1 :hover
a:hover {
color: red;
}
color: red;
}
5.2 :first-child
li:first-child {
font-weight: bold;
}
font-weight: bold;
}
5.3 :nth-child(n)
li:nth-child(odd) {
background-color: #f2f2f2;
}
background-color: #f2f2f2;
}
6. Les pseudo-éléments
::before et ::after
p::before {
content: "→ ";
color: grey;
}
content: "→ ";
color: grey;
}
Permet d'ajouter du contenu décoratif sans modifier le HTML.
7. Bonnes pratiques
- Préférer les classes aux ID pour le style (plus flexibles)
- Utiliser des noms de classes clairs, descriptifs
- Limiter la spécificité excessive pour garder un CSS maintenable
8. À éviter
- Utiliser trop de sélecteurs très précis (ex :
div ul li a span) - Réutiliser le même ID plusieurs fois (chaque ID doit être unique)
- Écrire des règles qui se contredisent, causant des conflits de style
9. Exercice pratique
Objectif : Appliquer différents sélecteurs dans une page HTML.
Consignes :
- Crée un fichier HTML contenant :
- Un titre
<h1>avec une classe"titre" - Une liste
<ul>avec plusieurs<li> - Deux paragraphes, dont un avec un ID
"intro" - Dans une balise
<style>, ajoute :- Un style rouge pour
.titre - Un style vert pour
#intro - Une couleur de fond pour tous les
lipairs
- Un style rouge pour
Correction (extrait HTML + CSS) :
<style>
.titre {
color: red;
}
#intro {
color: green;
}
li:nth-child(even) {
background-color: #f0f0f0;
}
</style>
<h1 class="titre">Bienvenue</h1>
<p id="intro">Ceci est l'introduction.</p>
<p>Autre paragraphe.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
.titre {
color: red;
}
#intro {
color: green;
}
li:nth-child(even) {
background-color: #f0f0f0;
}
</style>
<h1 class="titre">Bienvenue</h1>
<p id="intro">Ceci est l'introduction.</p>
<p>Autre paragraphe.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
10. À retenir
- Les sélecteurs permettent de cibler précisément les éléments HTML
- Ils peuvent être simples ou très puissants lorsqu'ils sont combinés
- Les pseudo-classes et pseudo-éléments permettent d'enrichir l'interactivité