Module 1Les bases du CSS

Chapitre 2 sur 15

Les sélecteurs

Cibler n'importe quel élément : classes, combinateurs, attributs, pseudo-classes et pseudo-éléments.

≈ 135 min
5 leçons
4 vidéos
3 exercices
TP

Objectifs

Avec ce chapitre, tu sauras…

cibler des éléments par type, classe et identifiant ;
utiliser le sélecteur universel et grouper des sélecteurs ;
combiner des sélecteurs : descendant, enfant, frère ;
cibler par attribut ([type="email"], [href$=".pdf"]) ;
utiliser les pseudo-classes (:hover, :focus, :nth-child(), :not()) ;
créer du contenu décoratif avec les pseudo-éléments ::before et ::after.

Le sélecteur est la moitié de chaque règle CSS : si tu ne sais pas cibler précisément un élément, tu ne pourras pas le styliser. Ce chapitre te donne tous les sélecteurs utilisés au quotidien, du plus simple au plus puissant.

Leçon 1

Les sélecteurs simples

Tableau: Les cinq sélecteurs de base

Sélecteur	Syntaxe	Cible	Exemple
de type	`p`	tous les éléments `<p>`	`h2 { color: navy; }`
de classe	`.nom`	tous les éléments avec `class="nom"`	`.prix { font-weight: bold; }`
d'identifiant	`#nom`	l'élément unique avec `id="nom"`	`#contact { padding: 20px; }`
universel	`*`	tous les éléments	`* { box-sizing: border-box; }`
groupement	`a, b`	les éléments de `a` et ceux de `b`	`h1, h2, h3 { font-family: Georgia; }`

Le HTML

html

<h2>Nos offres</h2>
<p class="intro">Trois formules adaptées à tes besoins.</p>
<p class="prix promo">À partir de 99 DH</p>
<p id="mention">Offre valable jusqu'au 31 décembre.</p>

Le CSS

css

h2 { color: #17306e; }             /* tous les h2 */
.intro { font-style: italic; }      /* class="intro" */
.prix { font-weight: bold; }        /* class contenant "prix" */
.promo { color: #c0392b; }          /* class contenant "promo" */
.prix.promo { font-size: 20px; }    /* les DEUX classes à la fois */
#mention { font-size: 12px; }       /* id="mention" */

preview

html

<h2 style="color:#17306e">Nos offres</h2>
<p style="font-style:italic">Trois formules adaptées à tes besoins.</p>
<p style="font-weight:bold;color:#c0392b;font-size:13pt">À partir de 99 DH</p>
<p style="font-size:8pt">Offre valable jusqu'au 31 décembre.</p>

Ce que tu vois dans le navigateur

Vidéo · À regarder

Formation CSS, tuto complet pour démarrer

L'instant Code · YouTube

Regarde de 3:00 à 7:234 min 23 s

Ouvrir sur YouTube à 3:00

Les sélecteurs dans la formation de L'instant Code. Après le segment, vérifie que tu sais écrire chacun des cinq sélecteurs du tableau sans regarder.

Leçon 2

Les combinateurs

Les combinateurs ciblent un élément selon sa position par rapport à un autre.

Tableau: Les quatre combinateurs

Combinateur	Syntaxe	Cible
descendant	`nav a`	tous les `a` à l'intérieur de `nav`, à n'importe quelle profondeur
enfant direct	`ul > li`	les `li` directement dans un `ul` (premier niveau seulement)
frère adjacent	`h2 + p`	le `p` qui suit immédiatement un `h2`
frères suivants	`h2 ~ p`	tous les `p` qui suivent un `h2`, avec le même parent

Les combinateurs en action

css

nav a { text-decoration: none; }        /* les liens du menu */
.menu > li { display: inline-block; }   /* seulement le premier niveau du menu */
h2 + p { font-size: 1.2em; }            /* le chapeau sous chaque titre */
.erreur ~ .aide { color: red; }         /* les aides qui suivent une erreur */

Leçon 3

Les sélecteurs d'attribut

Tableau: Cibler selon un attribut

Sélecteur	Cible	Exemple d'usage
`[attr]`	possède l'attribut	`input[required]` : champs obligatoires
`[attr="v"]`	valeur exacte	`input[type="email"]`
`[attr^="v"]`	valeur qui commence par v	`a[href^="https"]` : liens externes
`[attr$="v"]`	valeur qui finit par v	`a[href$=".pdf"]` : liens vers un PDF
`[attr*="v"]`	valeur qui contient v	`a[href*="youtube"]`

Styliser les champs et les liens selon leurs attributs

css

input[type="text"],
input[type="email"] {
  border: 1px solid #b9c2d3;
  padding: 8px;
}

a[href$=".pdf"] {
  color: #c0392b;
  font-weight: bold;
}

Leçon 4

Les pseudo-classes

Une pseudo-classe cible un élément dans un état particulier ou à une position particulière. Elle s'écrit avec un deux-points : a:hover.

Tableau: Les pseudo-classes d'état

Pseudo-classe	Quand ?
`:hover`	la souris survole l'élément
`:focus`	l'élément a le focus (champ sélectionné, lien atteint au clavier)
`:focus-visible`	le focus vient du clavier (pour un contour visible sans gêner les clics souris)
`:active`	l'élément est en train d'être cliqué
`:visited`	lien déjà visité
`:checked`	case ou bouton radio coché
`:disabled`	champ désactivé
`:invalid` / `:valid`	champ invalide / valide selon la validation HTML

Tableau: Les pseudo-classes de position

Pseudo-classe	Cible
`:first-child` / `:last-child`	le premier / dernier enfant de son parent
`:nth-child(3)`	le 3e enfant
`:nth-child(2n)` ou `:nth-child(even)`	les enfants pairs
`:nth-child(2n+1)` ou `:nth-child(odd)`	les enfants impairs
`:not(.actif)`	tout sauf les éléments `.actif`

Des boutons et un tableau zébré

css

.bouton {
  background-color: #2f5bc4;
  color: white;
}
.bouton:hover {
  background-color: #17306e;      /* plus foncé au survol */
}
.bouton:focus-visible {
  outline: 3px solid #f5b400;     /* contour visible au clavier */
}

tbody tr:nth-child(even) {
  background-color: #f2f5fb;      /* une ligne sur deux */
}

li:not(:last-child) {
  border-bottom: 1px solid #ddd;  /* un séparateur, sauf après le dernier */
}

Leçon 5

Les pseudo-éléments

Un pseudo-élément cible une partie d'un élément, ou crée un élément virtuel. Il s'écrit avec deux deux-points : p::first-line.

Tableau: Les pseudo-éléments à connaître

Pseudo-élément	Cible
`::before`	un contenu inséré au début de l'élément (avec `content`)
`::after`	un contenu inséré à la fin de l'élément (avec `content`)
`::first-letter`	la première lettre (lettrine)
`::first-line`	la première ligne
`::placeholder`	le texte d'exemple d'un champ
`::selection`	le texte sélectionné par l'utilisateur
`::marker`	la puce ou le numéro d'un `li`

Des pseudo-éléments décoratifs

css

.article p::first-letter {
  font-size: 2.5em;
  float: left;
  color: #2f5bc4;
}

a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.8em;
  color: #888;
}

.citation::before {
  content: "« ";
}
.citation::after {
  content: " »";
}

preview

html

<p><span style="font-size:24pt;float:left;color:#2f5bc4;line-height:1;margin-right:3px">L</span>a lettrine est créée avec <code>::first-letter</code> : la première lettre du paragraphe est agrandie, colorée et placée à gauche, comme dans les livres anciens. Le reste du texte s'écoule autour.</p>
<p>Télécharger <a href="#">le programme</a><span style="font-size:7pt;color:#888"> (PDF)</span> · <span>« La citation est entourée de guillemets générés »</span></p>

Ce que tu vois dans le navigateur

Vidéo · À regarder

Formation CSS, tuto complet pour démarrer

L'instant Code · YouTube

Regarde de 29:59 à 35:405 min 41 s

Ouvrir sur YouTube à 29:59

Les pseudo-éléments et les pseudo-classes. Reproduis chaque exemple de la vidéo, puis teste :hover sur un bouton de ta page.

Vidéo · À regarder

CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours

Dave Gray · YouTube

Regarde de 6:32:54 à 6:52:2919 min 35 s

Ouvrir sur YouTube à 6:32:54

Le chapitre « Pseudo » de Dave Gray (anglais) : vingt minutes sur les pseudo-classes et pseudo-éléments, pour aller plus loin.

Vidéo · À regarder

CSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours

Dave Gray · YouTube

Regarde de 14:23 à 34:1419 min 51 s

Ouvrir sur YouTube à 14:23

Le chapitre « Selectors » de Dave Gray (anglais) : révision des sélecteurs avec d'autres exemples.

Travaux pratiques

Les liens intelligents

Sans modifier le HTML, fais en sorte que : les liens externes (https) soient suivis d'une flèche « ↗ », les liens vers un PDF soient précédés de « [PDF] », et les liens mailto: soient en italique.

Exercices

Exercice 2.1

Choisis la bonne réponse

1Quel sélecteur cible les éléments class="carte" ?
2nav > a cible les liens…
3.btn.primaire cible…
4Pour les lignes impaires d'un tableau :
5::before ne s'affiche que si on définit…
6Quel sélecteur cible les liens qui finissent par .pdf ?

0/6 répondues

Exercice 2.2

Écris le sélecteur

Écris le sélecteur qui cible : (a) tous les paragraphes et toutes les listes ; (b) les liens situés dans le footer ; (c) le premier li de chaque liste ; (d) les champs input obligatoires ; (e) le paragraphe qui suit immédiatement chaque h3 ; (f) les liens qui commencent par mailto: ; (g) tous les li sauf ceux qui ont la classe actif ; (h) un bouton .envoyer survolé.

Exercice 2.3

Le tableau zébré

Reprends le bulletin de notes (exercice 9.2 de la formation HTML). Écris le CSS pour : un en-tête à fond bleu foncé et texte blanc, une ligne sur deux du corps à fond gris clair, une ligne qui change de couleur au survol, et le pied du tableau en gras.

L'essentiel du chapitre

À retenir

p (type) · .classe · #id · * (tous) · a, b (groupement).
A B descendant · A > B enfant direct · A + B frère suivant immédiat · A ~ B frères suivants.
.a.b = les deux classes sur le même élément ; .a .b = .b dans .a.
Attributs : [attr="v"], ^= commence, $= finit, *= contient.
Pseudo-classes (:) : :hover, :focus-visible, :nth-child(), :not(). Pseudo-éléments (::) : ::before, ::after avec content.
Ne supprime jamais le contour de focus sans le remplacer.

Sélecteur

Syntaxe

Cible

Exemple

de type

p

tous les éléments 

h2 { color: navy; }

de classe

.nom

tous les éléments avec class="nom"

.prix { font-weight: bold; }

d'identifiant

#nom

l'élément unique avec id="nom"

#contact { padding: 20px; }

universel

*

tous les éléments

* { box-sizing: border-box; }

groupement

a, b

les éléments de a et ceux de b

h1, h2, h3 { font-family: Georgia; }

h2 { color: #17306e; } /* tous les h2 */ .intro { font-style: italic; } /* class="intro" */ .prix { font-weight: bold; } /* class contenant "prix" */ .promo { color: #c0392b; } /* class contenant "promo" */ .prix.promo { font-size: 20px; } /* les DEUX classes à la fois */ #mention { font-size: 12px; } /* id="mention" */

<h2 style="color:#17306e">Nos offres</h2> Trois formules adaptées à tes besoins. À partir de 99 DH Offre valable jusqu'au 31 décembre.

Combinateur

Syntaxe

Cible

descendant

nav a

tous les a à l'intérieur de nav, à n'importe quelle profondeur

enfant direct

ul > li

les li directement dans un ul (premier niveau seulement)

frère adjacent

h2 + p

le p qui suit immédiatement un h2

frères suivants

h2 ~ p

tous les p qui suivent un h2, avec le même parent

nav a { text-decoration: none; } /* les liens du menu */ .menu > li { display: inline-block; } /* seulement le premier niveau du menu */ h2 + p { font-size: 1.2em; } /* le chapeau sous chaque titre */ .erreur ~ .aide { color: red; } /* les aides qui suivent une erreur */

Sélecteur

Cible

Exemple d'usage

[attr]

possède l'attribut

input[required] : champs obligatoires

[attr="v"]

valeur exacte

input[type="email"]

[attr^="v"]

valeur qui commence par v

a[href^="https"] : liens externes

[attr$="v"]

valeur qui finit par v

a[href$=".pdf"] : liens vers un PDF

[attr*="v"]

valeur qui contient v

a[href*="youtube"]

Pseudo-classe

Quand ?

:hover

la souris survole l'élément

:focus

l'élément a le focus (champ sélectionné, lien atteint au clavier)

:focus-visible

le focus vient du clavier (pour un contour visible sans gêner les clics souris)

:active

l'élément est en train d'être cliqué

:visited

lien déjà visité

:checked

case ou bouton radio coché

:disabled

champ désactivé

:invalid / :valid

champ invalide / valide selon la validation HTML

Pseudo-classe

Cible

:first-child / :last-child

le premier / dernier enfant de son parent

:nth-child(3)

le 3e enfant

:nth-child(2n) ou :nth-child(even)

les enfants pairs

:nth-child(2n+1) ou :nth-child(odd)

les enfants impairs

:not(.actif)

tout sauf les éléments .actif

.bouton { background-color: #2f5bc4; color: white; } .bouton:hover { background-color: #17306e; /* plus foncé au survol */ } .bouton:focus-visible { outline: 3px solid #f5b400; /* contour visible au clavier */ } tbody tr:nth-child(even) { background-color: #f2f5fb; /* une ligne sur deux */ } li:not(:last-child) { border-bottom: 1px solid #ddd; /* un séparateur, sauf après le dernier */ }

Pseudo-élément

Cible

::before

un contenu inséré au début de l'élément (avec content)

::after

un contenu inséré à la fin de l'élément (avec content)

::first-letter

la première lettre (lettrine)

::first-line

la première ligne

::placeholder

le texte d'exemple d'un champ

::selection

le texte sélectionné par l'utilisateur

::marker

la puce ou le numéro d'un li

.article p::first-letter { font-size: 2.5em; float: left; color: #2f5bc4; } a[href$=".pdf"]::after { content: " (PDF)"; font-size: 0.8em; color: #888; } .citation::before { content: "« "; } .citation::after { content: " »"; }

La lettrine est créée avec <code>::first-letter</code> : la première lettre du paragraphe est agrandie, colorée et placée à gauche, comme dans les livres anciens. Le reste du texte s'écoule autour. Télécharger <a href="#">le programme</a> (PDF) · « La citation est entourée de guillemets générés »

Exercices

Exercice 2.1

Choisis la bonne réponse

1Quel sélecteur cible les éléments class="carte" ?
2nav > a cible les liens…
3.btn.primaire cible…
4Pour les lignes impaires d'un tableau :
5::before ne s'affiche que si on définit…
6Quel sélecteur cible les liens qui finissent par .pdf ?

0/6 répondues

Exercice 2.2

Écris le sélecteur

Exercice 2.3

Le tableau zébré

À retenir

p (type) · .classe · #id · * (tous) · a, b (groupement).

A B descendant · A > B enfant direct · A + B frère suivant immédiat · A ~ B frères suivants.

.a.b = les deux classes sur le même élément ; .a .b = .b dans .a.

Attributs : [attr="v"], ^= commence, $= finit, *= contient.

Pseudo-classes (:) : :hover, :focus-visible, :nth-child(), :not(). Pseudo-éléments (::) : ::before, ::after avec content.

Ne supprime jamais le contour de focus sans le remplacer.