Chapitre 10 : Pseudo-classes et pseudo-éléments

1. Qu’est-ce qu’une pseudo-classe ?

Une pseudo-classe commence par : et permet de cibler un état particulier d’un élément HTML.

Exemples courants :

• :hover — quand l’utilisateur survole un élément
• :focus — quand un champ est actif
• :first-child, :last-child — pour cibler le premier ou dernier enfant
• :nth-child() — pour cibler un élément à une position précise

a:hover {
  text-decoration: underline;
  color: red;
}

li:first-child {
  font-weight: bold;
}

2. Qu’est-ce qu’un pseudo-élément ?

Un pseudo-élément commence par :: et permet de styliser une partie spécifique d’un élément HTML.

Les plus utilisés :

• ::before — insère du contenu avant un élément
• ::after — insère du contenu après un élément
• ::first-letter — cible la première lettre
• ::first-line — cible la première ligne

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

h2::after {
  content: " 🔥";
  color: orange;
}

3. Combiner les deux

On peut aussi combiner une pseudo-classe avec un pseudo-élément :

a:hover::after {
  content: " (lien)";
  font-size: 12px;
  color: gray;
}

4. Astuce : utiliser les pseudo-éléments pour les décorations

Tu peux par exemple créer une ligne avant un titre :

h3::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: blue;
  margin-right: 5px;
}