Niveau 2 — Sélecteurs

Les sélecteurs simples

Maîtriser les 4 types de sélecteurs de base : universel, élément, classe et ID.

1. Comprendre les sélecteurs simples

En une phrase : Un sélecteur CSS est un motif qui identifie les éléments HTML auxquels on veut appliquer des styles.

Avant de pouvoir styliser quoi que ce soit, il faut dire au navigateur quel cibler. C'est exactement le rôle d'un sélecteur. Il agit comme un adresse postale : il indique précisément quel élément (ou quels éléments) doit recevoir les déclarations de style.

Il existe 4 sélecteurs simples, du plus générique au plus spécifique :

Sélecteur	Syntaxe	Cible	Spécificité
Universel	`*`	Tous les éléments	0
Élément	`h1`, `p`, `a`…	Tous les éléments de ce type	1
Classe	`.ma-classe`	Tous les éléments avec cet attribut `class`	10
ID	`#mon-id`	L'élément unique avec cet attribut `id`	100

2. Syntaxe détaillée de chaque sélecteur

2.1 Le sélecteur universel `*`

Définition : Le sélecteur universel * cible absolument tous les éléments du document, sans exception. Il correspond à chaque nœud du DOM.

/* Applique cette marge à TOUS les éléments */
* {
  margin: 0;
  padding: 0;
}

/* Utilisation plus ciblée : réinitialiser à l'intérieur d'un conteneur */
.container * {
  box-sizing: border-box;
}

Cas pratiques :

Reset CSS : remettre à zéro les marges et paddings par défaut du navigateur
Box-sizing universel : forcer border-box sur tous les éléments
Animations globales : appliquer une transition à tout le contenu d'une section

Astuce : L'utilisation de * est coûteuse en performance car le navigateur doit l'appliquer à chaque nœud du DOM. Utilise-le avec parcimonie, principalement pour les réinitialisations globales.

2.2 Le sélecteur d'élément (ou de type)

Définition : Le sélecteur d'élément cible tous les éléments HTML d'un type donné. On écrit simplement le nom de la balise sans aucun préfixe.

/* Tous les h1 */
h1 {
  font-size: 2rem;
  color: #1e293b;
}

/* Tous les paragraphes */
p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Tous les liens */
a {
  color: #2563eb;
  text-decoration: none;
}

/* Tous les éléments de liste */
li {
  padding: 0.3rem 0;
}

Cas pratiques :

Définir la typographie de base d'un site (police, taille, couleur du texte)
Styliser les titres de manière uniforme
Régler l'espacement des listes et paragraphes

2.3 Le sélecteur de classe

Définition : Le sélecteur de classe cible tous les éléments qui possèdent l'attribut class correspondant. Il commence par un point .. Un élément peut avoir plusieurs classes.

/* HTML : un seul élément avec plusieurs classes */
<button class="btn btn-primary btn-lg">Cliquer ici</button>

/* CSS : cibler chaque classe individuellement */
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-lg {
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
}

Cas pratiques :

Composants réutilisables : boutons, cartes, badges, alertes
Variantes : .btn-primary, .btn-secondary, .btn-danger
Mises en page : .sidebar, .main-content, .footer

2.4 Le sélecteur d'ID

Définition : Le sélecteur d'ID cible un élément unique identifié par l'attribut id. Il commence par un dièse #. Un ID doit être unique dans tout le document.

<!-- HTML : l'ID est unique -->
<header id="main-header">
  <h1>Mon site</h1>
</header>

<nav id="sidebar">
  <ul>...</ul>
</nav>

/* CSS */
#main-header {
  background: #1e293b;
  color: white;
  padding: 2rem;
}

#sidebar {
  width: 250px;
  background: #f1f5f9;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
}

Cas pratiques :

Éléments uniques : en-tête principal, barre latérale, pied de page
Ancres de navigation : cibler une section via l'URL (section#contact)
JavaScript : document.getElementById() est très rapide

3. Visualisation

3.1 Portée de chaque sélecteur

Sélecteur universel *          →  ★ TOUT le DOM
                                │
Sélecteur d'élément p           →  ← Tous les <p>
                                │
Sélecteur de classe .carte      →  ← Tous les éléments avec class="carte"
                                │
Sélecteur d'ID #header         →  ← Un seul élément avec id="header"

Portée et spécificité des 4 sélecteurs simples

3.2 Hiérarchie de spécificité

   ┌─────────────────────────────────────┐
   │  *          Spécificité : 0  (plus faible)  │
   ├─────────────────────────────────────┤
   │  h1, p, a   Spécificité : 1                │
   ├─────────────────────────────────────┤
   │  .ma-classe Spécificité : 10               │
   ├─────────────────────────────────────┤
   │  #mon-id    Spécificité : 100 (plus forte) │
   └─────────────────────────────────────┘

Quand deux règles s'appliquent au même élément, celle avec la spécificité plus élevée gagne.

4. Exemples progressifs

4.1 Sélecteur universel : reset minimal

Démonstration : Reset avec *

/* Le code appliqué */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
}

Élément div — impacté par le reset

Paragraphe — impacté par le reset

Élément span — impacté par le reset

Tous ces éléments ont le même style car le sélecteur * les cible tous.

4.2 Sélecteur d'élément : typographie de base

Démonstration : Styliser par type de balise

/* Le code appliqué */
h1 {
  color: #dc2626;
  font-size: 1.5rem;
  border-bottom: 2px solid #dc2626;
  padding-bottom: 0.5rem;
}

h2 {
  color: #2563eb;
  font-size: 1.2rem;
}

p {
  color: #64748b;
  font-style: italic;
}

a {
  color: #7c3aed;
  text-decoration: underline;
  font-weight: 600;
}

Titre h1 — Rouge et souligné

Sous-titre h2 — Bleu

Ceci est un paragraphe — gris et italique.

Ceci est un lien — violet et souligné

4.3 Sélecteur de classe : composants réutilisables

Démonstration : Boutons avec classes

/* Le code appliqué */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-secondary {
  background: #7c3aed;
  color: white;
}

.btn-success {
  background: #16a34a;
  color: white;
}

4.4 Sélecteur d'ID : éléments uniques

Démonstration : En-tête et barre latérale

/* Le code appliqué */
#banner-demo {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}

#sidebar-demo {
  background: #f1f5f9;
  padding: 1rem;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
}

5. Erreurs fréquentes

Erreur 1 : Utiliser un ID plusieurs fois

<!-- FAUX — L'ID doit être unique ! -->
<div id="carte">Carte 1</div>
<div id="carte">Carte 2</div>

<!-- CORRECT — Utiliser des classes pour les éléments multiples -->
<div class="carte">Carte 1</div>
<div class="carte">Carte 2</div>

Erreur 2 : Oublier le point pour une classe ou le dièse pour un ID

/* FAUX — cible toutes les balises <primary> qui n'existent pas */
primary {
  color: blue;
}

/* FAUX — même problème */
#primary {
  color: blue;
}

/* CORRECT — la classe commence par un point */
.btn-primary {
  color: blue;
}

/* CORRECT — l'ID commence par un dièse */
#main-header {
  color: blue;
}

Erreur 3 : Nommer les classes avec des noms de couleur ou de forme

/* FAUX — le nom dépend de l'apparence, pas de la signification */
.rouge { color: red; }
.grand { font-size: 2rem; }
.rond { border-radius: 50%; }

/* CORRECT — nommer selon la signification */
.texte-erreur { color: red; }
.titre { font-size: 2rem; }
.avatar { border-radius: 50%; }

Erreur 4 : Confondre élément et classe dans la syntaxe

/* FAUX — pas de point pour un sélecteur d'élément */
.p {
  font-size: 16px;
}

/* CORRECT — sans point pour cibler les balises <p> */
p {
  font-size: 16px;
}

/* Si tu veux cibler uniquement les <p> avec une classe */
p.intro {
  font-size: 16px;
}

6. Bonnes pratiques

Les règles d'or :

Préférer les classes aux IDs pour le CSS — les IDs sont trop spécifiques et difficiles à réutiliser.
Utiliser des noms BEM : .block__element--modifier pour des noms de classes clairs.
Éviter le sélecteur universel * sauf pour les réinitialisations globales.
Réserver les IDs aux ancres de navigation et aux manipulations JavaScript.
Nommer selon la signification, pas selon l'apparence.
Un seul type de sélecteur par règle quand c'est possible — ne pas mélanger sans nécessité.

/* ✅ Bonne pratique : classes avec BEM */
.card {}
.card__title {}
.card__body {}
.card--featured {}

/* ✅ Bonne pratique : sélecteur d'élément pour la base */
h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
}

/* ✅ Bonne pratique : ID uniquement pour les ancres */
#contact { scroll-margin-top: 80px; }

Critère	Classe `.classe`	ID `#id`
Nombre par élément	Plusieurs	Un seul
Réutilisation	Oui — même classe sur N éléments	Non — unique dans la page
Spécificité	10	100
Facilité de surcharge	Facile	Difficile (très spécifique)
Usage recommandé	Styles CSS	Ancres, JavaScript

7. Mini-défi

Exercice 1 : Sélecteur universel

Écris une règle CSS qui utilise le sélecteur universel pour :

Supprimer toutes les marges et paddings
Forcer box-sizing: border-box sur tous les éléments

Solution :

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Exercice 2 : Sélecteur d'élément

Écris des règles pour :

Tous les <h1> : couleur #1e293b, taille 2rem
Tous les <p> : couleur #64748b, interligne 1.8
Tous les <a> : couleur #2563eb, pas de soulignement

Solution :

h1 {
  color: #1e293b;
  font-size: 2rem;
}

p {
  color: #64748b;
  line-height: 1.8;
}

a {
  color: #2563eb;
  text-decoration: none;
}

Exercice 3 : Sélecteurs de classe

Crée 3 boutons différents en utilisant une classe commune .btn et 3 classes de variante :

.btn : padding, border-radius, font-weight, curseur
.btn-rouge : fond rouge, texte blanc
.btn-vert : fond vert, texte blanc
.btn-grand : taille de police plus grande, padding plus grand

Solution :

.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-rouge {
  background: #dc2626;
  color: white;
}

.btn-vert {
  background: #16a34a;
  color: white;
}

.btn-grand {
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
}

Exercice 4 : ID unique

Crée un élément <div id="alerte"> avec :

Un fond #fef2f2
Une bordure gauche de 4px solide #dc2626
Un padding de 1rem
Un rayon de bordure de 0 8px 8px 0

Solution :

#alerte {
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  padding: 1rem;
  border-radius: 0 8px 8px 0;
}

8. Projet d'application

Projet : Carte de visite stylisée

Crée un fichier index.html et style.css qui affichent une carte de visite avec :

HTML requis :

Un conteneur <div id="carte">
Un nom dans <h1>
Un titre professionnel dans <h2>
Une bio dans <p class="bio">
Un lien email dans <a class="lien-email">
Un lien GitHub dans <a class="lien-github">

CSS requis :

Reset universel : * avec margin: 0; padding: 0; box-sizing: border-box
Style de base : body avec police et couleur de fond
Carte : #carte avec fond blanc, ombre, border-radius, padding
Nom : h1 avec taille et couleur spécifiques
Bio : .bio avec couleur grise et italique
Liens : classes avec couleurs différentes et pas de soulignement

Objectif : Utiliser les 4 types de sélecteurs dans un même projet pour comprendre quand utiliser quoi.

9. Révision

Quiz rapide

Quel sélecteur cible tous les éléments d'une page ?
Quel est le symbole du sélecteur de classe ?
Peut-on appliquer plusieurs classes à un même élément ?
Un ID doit-il être unique dans la page ? Oui / Non
Quel sélecteur a la spécificité la plus élevée : p, .texte, ou #intro ?
Écris un sélecteur pour cibler tous les éléments <h2>.
Écris un sélecteur pour cibler un élément avec la classe .highlight.
Pourquoi faut-il préférer les classes aux IDs pour le CSS ?

Réponses :

*
Le point .
Oui : class="premiere deuxieme"
Oui
#intro (spécificité 100)
h2 { ... }
.highlight { ... }
Parce que les IDs ont une spécificité de 100, ce qui les rend difficiles à surcharger. Les classes (spécificité 10) offrent un meilleur équilibre entre flexibilité et ciblage.

1. Comprendre les sélecteurs simples

2. Syntaxe détaillée de chaque sélecteur

2.1 Le sélecteur universel *

2.2 Le sélecteur d'élément (ou de type)

2.3 Le sélecteur de classe

2.4 Le sélecteur d'ID

3. Visualisation

3.1 Portée de chaque sélecteur

3.2 Hiérarchie de spécificité

4. Exemples progressifs

4.1 Sélecteur universel : reset minimal

4.2 Sélecteur d'élément : typographie de base

Titre h1 — Rouge et souligné

Sous-titre h2 — Bleu

4.3 Sélecteur de classe : composants réutilisables

4.4 Sélecteur d'ID : éléments uniques

Bandau principal

5. Erreurs fréquentes

6. Bonnes pratiques

7. Mini-défi

8. Projet d'application

9. Révision

2.1 Le sélecteur universel `*`