🎯 Module 2 — CSS

« Les sélecteurs : trouver la bonne cible dans la foule »

Dans cette ville, tout le monde se ressemble.
Mais quand il faut agir…
il faut savoir qui viser.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

Comprendre le rôle central des sélecteurs CSS
Utiliser les sélecteurs simples, combinés et avancés
Cibler des éléments selon leur structure, attributs ou état
Maîtriser les pseudo-classes et pseudo-éléments
Comprendre la spécificité CSS et l’ordre d’application des règles

🕵️ Chapitre 2 — Les Sélecteurs CSS

Les sélecteurs CSS sont la base de toute enquête visuelle.
Sans eux, aucune règle ne s’applique.
Sans eux, le CSS est aveugle.

Ils permettent de dire au navigateur :

« C’est toi, et seulement toi, que je veux modifier. »

CSS propose plusieurs types de sélecteurs :
simples, combinés, par attributs, pseudo-classes, pseudo-éléments…
Chaque outil a son usage. Chaque cible son profil.

🎯 2.1 — Sélecteurs simples : type, classe, identifiant

▶ Sélecteur de type — La rafle générale

Cible tous les éléments HTML d’un même type.

p {
  color: blue;
}

👉 Tous les <p> passent à table. Aucun ne s’échappe.

▶ Sélecteur de classe — Les suspects connus

Commence par un point (.). Réutilisable. Précis. Fiable.

HTML :

<p class="important">Message prioritaire</p>

CSS :

.important {
  font-weight: bold;
}

▶ Sélecteur d’identifiant (ID) — La cible unique

Commence par #. Un seul ID par page. Toujours unique.

HTML :

<h1 id="title">Dossier principal</h1>

CSS :

#title {
  color: red;
}

Quand tu utilises un ID, tu sais exactement qui tu regardes.

🧱 2.2 — Sélecteurs combinés : lire entre les lignes

▶ Descendant (espace) — Quelqu’un planqué à l’intérieur

div p {
  color: green;
}

👉 Tous les <p> dans un <div>.

▶ Enfant direct (`>`) — Pas les figurants

ul > li {
  border-bottom: 1px solid #ccc;
}

👉 Seulement les enfants directs. Pas les petits-enfants.

▶ Adjacent (`+`) — Juste après le crime

h2 + p {
  margin-top: 0;
}

👉 Le paragraphe qui suit immédiatement un <h2>.

▶ Général (`~`) — Tous les témoins après

h2 ~ p {
  color: grey;
}

👉 Tous les <p> après le <h2>.

🏷️ 2.3 — Sélecteurs d’attributs : fouiller les poches

Ciblage basé sur les attributs HTML.

Attribut présent

input[required] {
  border: 2px solid red;
}

Valeur exacte

a[target="_blank"] {
  color: blue;
}

Commence par

img[src^="https"] {
  border: 1px solid green;
}

Se termine par

img[src$=".png"] {
  opacity: 0.8;
}

Contient

div[class*="box"] {
  padding: 20px;
}

Chaque attribut est un indice. Encore faut-il savoir lequel regarder.

🧠 2.4 — Pseudo-classes : états mentaux des éléments

Les pseudo-classes ciblent un état, pas un élément brut.

Au survol

button:hover {
  background-color: #333;
}

Focus clavier

input:focus {
  outline: 2px solid blue;
}

Clic actif

a:active {
  color: red;
}

Position dans la liste

li:nth-child(2) {
  color: purple;
}

Validation

input:valid {
  border-color: green;
}

Les éléments changent de comportement. Le CSS les observe.

✒️ 2.5 — Pseudo-éléments : manipuler les détails

Les pseudo-éléments ciblent une partie de l’élément.

`::before`

h1::before {
  content: "🕵️ ";
}

`::after`

h1::after {
  content: " 🔥";
}

Première lettre

p::first-letter {
  font-size: 2em;
}

Sélection utilisateur

::selection {
  background: yellow;
}

Décoratif. Subtil. Efficace.

⚖️ 2.6 — Spécificité et ordre d’application

Qui a le dernier mot ?

Quand plusieurs règles s’appliquent, CSS tranche.

Priorité (du plus faible au plus fort)

Type → p, div
Classe / pseudo-classes → .btn, :hover
ID → #header
Inline → style=""
!important ⚠️ (à éviter)

Exemple

p { color: black; }          /* faible */
.text { color: blue; }      /* plus fort */
#intro { color: red; }      /* encore plus fort */
p#intro { color: green; }   /* ultra précis */

👉 Résultat : vert.

Ordre d’écriture

À spécificité égale, la dernière règle gagne.

p { color: blue; }
p { color: orange; } /* appliquée */

🗂️ Conclusion — Choisir sa cible, c’est survivre

Un bon design commence par un bon ciblage. Un mauvais sélecteur, et tout le site déraille.

En CSS, tu ne styles jamais au hasard. Tu vises. Tu frappes. Et tu passes au module suivant.

Module 2 — Les sélecteurs : trouver la bonne cible dans la foule