Sélecteurs CSS
Une règle CSS a deux missions : dire qui mettre en forme, et comment. Le « comment », vous l'avez déjà pratiqué avec les propriétés, les valeurs et les unités. Cette séance se concentre sur le « qui » : le sélecteur, placé au début de la règle.
Qu'est-ce qu'un sélecteur CSS ?
Un sélecteur est un motif qui permet au navigateur de repérer les éléments HTML auxquels appliquer le bloc de déclarations. Si le sélecteur correspond à un élément de la page, cet élément reçoit tous les styles écrits entre les accolades { }.
Les types de sélecteurs de base en un coup d'œil
Commencez par ces quatre-là. Les combinateurs, les attributs et les pseudo-classes viendront dans les séances suivantes ; maîtrisez d'abord l'élément, la class, l'id et *.
📊 Sélecteurs CSS de base
| Sélecteur | Ce qu'il cible | Exemple |
|---|---|---|
| Élément (type) | Tous les éléments portant ce nom de balise | p { … } |
| class | Les éléments qui ont cet attribut class | .card { … } |
| id | L'unique élément qui a cet id | #hero { … } |
| Universel | Tous les éléments (à utiliser avec parcimonie) | * { … } |
Les sélecteurs d'élément (type)
Un sélecteur d'élément, c'est tout simplement le nom de la balise, sans point ni dièse. h1 met en forme chaque <h1> de la page, p chaque paragraphe. C'est l'outil le plus large du quotidien quand vous voulez une base homogène pour une balise.
Sélecteurs d'élément pour titres et paragraphes
cssh1 {
color: #0f766e;
font-size: 2rem;
}
p {
color: #334155;
line-height: 1.6;
}Quand utiliser un sélecteur de type
Servez-vous-en pour les réglages communs à tout le site : couleur du texte du body, graisse des titres, espacement des listes. Si seuls certains paragraphes doivent avoir un style particulier, préférez une class plutôt que de modifier tous les p.
Les sélecteurs de class
Un sélecteur de class commence par un point (.) suivi du nom de la class. Dans le HTML, vous repérez les éléments avec class="card". Une même class peut figurer sur autant d'éléments que vous voulez : c'est pour cela qu'elle est l'outil de base d'un design réutilisable.
Sélecteur de class pour des cartes réutilisables
css.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}Le HTML doit correspondre au nom de la class
Le CSS .card ne met en forme que les éléments qui portent réellement class="card" (ou plusieurs classes dont card). L'orthographe doit être exacte : .Card et .card sont deux sélecteurs différents.
Les sélecteurs d'id
Un sélecteur d'id commence par un dièse (#) suivi du nom de l'id. Dans le HTML, vous écrivez id="hero". Un id doit être unique dans la page : un seul élément. Pour la plupart des styles, préférez les classes et gardez l'id pour un repère vraiment unique.
Sélecteur d'id pour une bannière unique
css#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}Le sélecteur universel (*)
Le sélecteur universel * cible tous les éléments. On l'utilise parfois pour une réinitialisation simple (par exemple définir box-sizing), mais appliquer des couleurs ou des marges à tout risque de perturber votre mise en page. Pour l'apparence courante, choisissez des sélecteurs plus précis.
Sélecteur universel utilisé avec prudence
css* {
box-sizing: border-box;
}Combiner les sélecteurs dans une page
Une vraie feuille de style mélange les types : les réglages de base avec des sélecteurs d'élément, les blocs réutilisables avec des classes, et les rares cibles uniques avec des ids. Cette petite feuille montre le réflexe à prendre : toutes les règles n'ont pas besoin d'un id.
Petit mélange de types de sélecteurs dans une page
cssbody {
font-family: Georgia, serif;
margin: 0;
}
.card {
max-width: 28rem;
margin: 1rem;
}
#hero {
padding: 2rem;
}class ou id : une bonne habitude
- Privilégiez les classes pour les boutons, les cartes, les liens de navigation et tout ce que vous pourriez réutiliser
- Réservez l'id aux cibles vraiment uniques (une bannière de page, le champ de recherche principal)
- N'inventez pas un nouvel id pour chaque boîte stylée : cela empêche la réutilisation et posera problème dans les leçons sur la cascade
À vous de jouer
- Ajoutez à une page d'exercice un
<h1>, deux<p>, un<div class="card">et une<section id="hero">. - Écrivez une règle d'élément pour
h1etp. - Stylez
.cardavec un remplissage (padding), un fond clair et une bordure (border). - Stylez
#heroavec un fond sombre et un texte clair. - Facultatif : ajoutez
* { box-sizing: border-box; }et remarquez que le remplissage dans la carte devient plus prévisible.
Erreurs courantes
- Écrire
card { }alors que vous vouliez.card { }: sans le point, le navigateur cherche un élément nommé card, qui n'existe pas en HTML - Écrire
hero { }au lieu de#hero { }: le dièse est oublié - Mettre
class="card"dans le HTML mais écrire.crddans le CSS : aucune correspondance, donc aucun style - Donner le même
idà plusieurs éléments : HTML invalide et ciblage imprévisible - N'utiliser que des sélecteurs de type pour un design ponctuel : tous les
poudivchangent alors que vous ne vouliez modifier qu'un seul bloc
Résumé
- Les sélecteurs choisissent quels éléments HTML reçoivent les styles de la règle
- Les sélecteurs d'élément utilisent le nom de la balise (
h1,p) - Les sélecteurs de class commencent par un point (
.card) et correspondent à l'attributclassdu HTML - Les sélecteurs d'id commencent par un dièse (
#hero) et doivent cibler un seul élément unique *cible tout : utile pour une réinitialisation réfléchie, pas pour toute la décoration- Privilégiez les classes pour les interfaces réutilisables ; gardez les ids rares et uniques
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut