Pseudo-classes et pseudo-éléments CSS

Tu veux qu'un lien devienne doré quand on le survole avec la souris, qu'une ligne sur deux d'un tableau ait un fond différent, et qu'un hiéroglyphe apparaisse devant chaque titre - sans ajouter de classes ni d'ornements dans le HTML. Pour ce genre de tâches, le CSS dispose des pseudo-classes et des pseudo-éléments.

Mohamed montre du doigt les peintures du temple : « Tu vois comme les couleurs changent selon la lumière ? En CSS, nous avons des pseudo-classes et des pseudo-éléments qui permettent de changer l'apparence des éléments selon leur état, ou d'ajouter des décorations sans modifier le HTML ! »

Pseudo-classes - réagir à l'état

Les pseudo-classes permettent de styliser les éléments en fonction de leur état ou de leur position dans le document. On les écrit avec un seul deux-points :.

États interactifs

Le premier groupe réagit à ce que fait l'utilisateur : il survole un élément avec le curseur, il clique, ou il passe à un champ de formulaire avec la touche Tab :

1/* Lien visité */
2a:visited {
3  color: #8B7355;
4}
5
6/* Quand le curseur est au-dessus de l'élément */
7a:hover {
8  color: gold;
9  text-decoration: underline;
10}
11
12/* Quand l'élément est actif (cliqué) */
13button:active {
14  background-color: darkgoldenrod;
15  transform: scale(0.95);
16}
17
18/* Quand l'élément a le focus (par ex. après un appui sur Tab) */
19input:focus {
20  border-color: gold;
21  outline: 2px solid rgba(255, 215, 0, 0.5);
22}

L'ordre compte : a:visited se trouve avant a:hover. Les deux règles ont la même force, donc c'est la plus tardive qui l'emporte - si :visited se trouvait plus bas, un lien visité ne deviendrait pas doré au survol. MDN recommande l'ordre :link, :visited, :hover, :active. Ne supprime pas non plus le contour de :focus sans prévoir un autre style bien visible - les personnes qui naviguent sur la page au clavier s'en servent.

Pseudo-classes structurelles

Le deuxième groupe permet de sélectionner des éléments en fonction de leur position dans l'arbre du document - lequel est le premier, lequel est le dernier, lequel revient une fois sur deux :

1/* Premier élément enfant */
2li:first-child {
3  font-weight: bold;
4  color: gold;
5}
6
7/* Dernier élément enfant */
8li:last-child {
9  border-bottom: 2px solid gold;
10}
11
12/* Un élément sur deux (pairs) */
13tr:nth-child(even) {
14  background-color: #f5f0e6;
15}
16
17/* Un élément sur deux (impairs) */
18tr:nth-child(odd) {
19  background-color: #fff;
20}
21
22/* Un élément sur trois */
23li:nth-child(3n) {
24  color: crimson;
25}
26
27/* Troisième élément en partant de la fin */
28li:nth-last-child(3) {
29  font-style: italic;
30}

On compte les éléments à partir de 1, et non de 0, donc nth-child(3n) sélectionne le troisième, le sixième et le neuvième élément, tandis que even et odd désignent les éléments pairs et impairs. Du plus précoce au plus tardif, l'ordre est : :first-child, :nth-child(2), :nth-child(3), et enfin :last-child.

Pseudo-classes modernes

Le troisième groupe rassemble des outils plus récents, qui raccourcissent les longs sélecteurs et permettent de sélectionner des éléments d'après ce qu'ils contiennent :

1/* Négation - tous les liens SAUF ceux de la classe .special */
2a:not(.special) {
3  color: #8B6914;
4}
5
6/* Regrouper des sélecteurs - :is() */
7:is(h1, h2, h3):hover {
8  color: gold;
9}
10
11/* :has() - sélecteur de parent (le plus récent !) */
12/* Styliser un article QUI CONTIENT une image */
13article:has(img) {
14  border: 2px solid gold;
15  padding: 20px;
16}
17
18/* Div qui contient un paragraphe vide */
19div:has(p:empty) {
20  display: none;
21}

La pseudo-classe :not() inverse une condition, :is() rassemble plusieurs sélecteurs en un seul, et :has() sélectionne un parent en fonction de son contenu - article:has(img) met en forme l'article, et non l'image. Les principaux navigateurs prennent en charge :has() depuis la fin de l'année 2023.

Pseudo-éléments - des décorations sans HTML

Les pseudo-éléments permettent de styliser des parties d'un élément ou d'ajouter du contenu décoratif sans modifier le HTML. On les écrit avec un double deux-points ::. Les navigateurs comprennent aussi l'ancienne écriture avec un seul deux-points, par exemple :before, mais je te recommande de toujours écrire ::, pour les distinguer des pseudo-classes.

::before et ::after

Ils ajoutent du contenu avant ou après le contenu de l'élément, à l'intérieur de celui-ci. Ils nécessitent la propriété content : sans elle, le pseudo-élément n'est pas créé du tout, même si tu lui donnes une couleur et des dimensions.

1/* Ajoute un hiéroglyphe avant le titre */
2h2::before {
3  content: "𓂀 ";
4  color: gold;
5}
6
7/* Ajoute une flèche après le lien */
8a::after {
9  content: " →";
10  color: gold;
11}
12
13/* Ligne décorative sous le titre */
14h1::after {
15  content: "";
16  display: block;
17  width: 100px;
18  height: 3px;
19  background: linear-gradient(to right, gold, transparent);
20  margin-top: 10px;
21}

Dans le troisième exemple, content: "" est une chaîne vide, mais elle suffit pour que le pseudo-élément soit créé - les dimensions et le dégradé font le reste. Une règle complète se compose d'un sélecteur, d'un pseudo-élément et d'un bloc avec content, par exemple h1::after { content: "→"; }. Ce contenu n'existe pas dans le HTML, alors n'y place rien d'important.

::placeholder et ::selection

Ces deux pseudo-éléments mettent en forme le texte indicatif d'un champ de formulaire vide et le texte sélectionné à la souris - des fragments qu'aucune balise ne permet de désigner.

1/* Style du placeholder dans un input */
2input::placeholder {
3  color: #c4a35a;
4  font-style: italic;
5}
6
7/* Style du texte sélectionné */
8p::selection {
9  background-color: gold;
10  color: #2c1810;
11}

Le placeholder disparaît dès que l'utilisateur commence à écrire, il ne remplace donc pas le label du champ.

::first-line et ::first-letter

La dernière paire agit sur le texte d'un paragraphe - elle sélectionne sa première ligne ou sa première lettre, comme une lettrine ornée dans le manuscrit d'un scribe.

1/* Première lettre du paragraphe - effet de lettrine */
2p::first-letter {
3  font-size: 3em;
4  float: left;
5  color: gold;
6  font-family: serif;
7  line-height: 1;
8  margin-right: 5px;
9}
10
11/* Première ligne du texte */
12p::first-line {
13  font-weight: bold;
14  color: #8B6914;
15}

La déclaration float: left et une grande valeur de font-size créent une lettrine haute de plusieurs lignes de texte.

Applications pratiques

Réunissons maintenant les deux familles dans de vrais composants.

Liste interactive avec effets au survol

Le premier composant est une liste de pharaons dont les lignes reçoivent, au survol, un fond et une bordure gauche dorée :

1.pharaoh-list li {
2  padding: 10px;
3  transition: all 0.3s ease;
4  border-left: 3px solid transparent;
5}
6
7.pharaoh-list li:hover {
8  background-color: #f5f0e6;
9  border-left-color: gold;
10  padding-left: 20px;
11}
12
13.pharaoh-list li:nth-child(even) {
14  background-color: #faf8f3;
15}
16
17.pharaoh-list li::before {
18  content: "» ";
19  color: gold;
20}

La déclaration transition rend le changement fluide - tu découvriras les transitions dans le module sur les animations. La règle ::before a pour l'instant un content vide, elle n'affiche donc rien - dans l'exercice, tu y écriras une flèche.

Boutons avec pseudo-éléments

Le deuxième composant est un bouton sur lequel glisse, au survol, une bande de lumière, comme un rayon de soleil sur un masque d'or :

1.btn-egyptian {
2  position: relative;
3  padding: 12px 24px;
4  background: #8B6914;
5  color: white;
6  border: none;
7  overflow: hidden;
8}
9
10.btn-egyptian::before {
11  content: "";
12  position: absolute;
13  top: 0;
14  left: -100%;
15  width: 100%;
16  height: 100%;
17  background: linear-gradient(
18    90deg, transparent, rgba(255,215,0,0.3), transparent
19  );
20  transition: left 0.5s;
21}
22
23.btn-egyptian:hover::before {
24  left: 100%;
25}

Le pseudo-élément ::before est une bande de dégradé cachée hors du bouton (left: -100%), qui glisse de l'autre côté au survol. Remarque l'écriture :hover::before - d'abord la pseudo-classe, puis le pseudo-élément.

Infobulles en CSS

Le troisième composant est une infobulle dont la fonction attr() récupère le texte dans l'attribut data-tooltip du HTML :

1.tooltip {
2  position: relative;
3}
4
5.tooltip::after {
6  content: attr(data-tooltip);
7  position: absolute;
8  bottom: 100%;
9  left: 50%;
10  transform: translateX(-50%);
11  background: #2c1810;
12  color: gold;
13  padding: 5px 10px;
14  border-radius: 4px;
15  font-size: 14px;
16  white-space: nowrap;
17  opacity: 0;
18  pointer-events: none;
19  transition: opacity 0.3s;
20}
21
22.tooltip:hover::after {
23  opacity: 1;
24}

L'infobulle est invisible (opacity: 0) et apparaît en fondu au survol, tandis que pointer-events: none l'empêche d'intercepter les clics.

Déboguer dans les DevTools

Quand un style ne fonctionne pas, ne devine pas. Fais un clic droit sur l'élément et choisis Inspecter, trouve dans le panneau Styles les règles qui le concernent, compare la spécificité des sélecteurs et corrige la valeur dans l'inspecteur. Le bouton :hov force l'état :hover sans que tu aies à bouger la souris. Reporte ensuite la correction qui fonctionne dans le fichier CSS, car les modifications faites dans l'inspecteur disparaissent quand on actualise la page.

Mohamed résume : « Les pseudo-classes réagissent à l'état de l'élément, les pseudo-éléments ajoutent des décorations. Ensemble, ils créent des interfaces dynamiques sans HTML supplémentaire ! »

Dans l'éditeur ci-dessous, toutes ces techniques fonctionnent ensemble - survole les noms des pharaons et clique dans les champs du formulaire :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <title>Pseudo-classes et pseudo-éléments</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <h1>Les pharaons d'Égypte</h1>
10
11  <ul class="pharaoh-list">
12    <li data-tooltip="2589-2566 av. J.-C.">Khéops (Khoufou)</li>
13    <li data-tooltip="1332-1323 av. J.-C.">Toutânkhamon</li>
14    <li data-tooltip="1279-1213 av. J.-C.">Ramsès II</li>
15    <li data-tooltip="51-30 av. J.-C.">Cléopâtre VII</li>
16    <li data-tooltip="1479-1458 av. J.-C.">Hatchepsout</li>
17  </ul>
18
19  <h2>Contacter le musée</h2>
20  <form>
21    <label for="name">Ton nom</label>
22    <input type="text" id="name" placeholder="Ton nom...">
23    <label for="email">Ton e-mail</label>
24    <input type="email" id="email" placeholder="Ton email...">
25    <button class="btn-egyptian">Envoyer le message</button>
26  </form>
27
28  <article>
29    <p>L'Égypte antique est l'une des plus anciennes civilisations du monde. Pendant des milliers d'années, les Égyptiens ont construit des structures monumentales, développé un système d'écriture et créé une culture avancée qui nous fascine encore aujourd'hui.</p>
30  </article>
31</body>
32</html>

Retiens : une pseudo-classe, avec un seul deux-points, réagit à l'état d'un élément, et un pseudo-élément, avec deux deux-points, lui ajoute une décoration - comme la lumière qui change les couleurs des peintures et la lettrine ornée du scribe.