# Pseudo-classe

> Une pseudo-classe cible un élément selon un état ou une position qu'aucun attribut HTML ne décrit, comme le survol de la souris ou le fait d'être le premier enfant.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/pseudo-classe/

Certains styles ne dépendent pas de ce qu'un élément *est*, mais de ce qu'il *fait* ou de *où* il se trouve dans la page. C'est le rôle des pseudo-classes, notées avec deux-points simples (`:hover`, `:focus`, `:nth-child()`, `:checked`) : elles s'ajoutent à un sélecteur pour ne toucher l'élément que dans certaines conditions, sans qu'il faille poser une classe ou un attribut supplémentaire dans le HTML.

## Fonctionnement dans WordPress

L'éditeur de blocs génère lui-même des styles avec pseudo-classes : les boutons du bloc Bouton reçoivent un `:hover` et un `:focus-visible` pour l'accessibilité clavier, et les liens de navigation utilisent `:focus` pour rester repérables au clavier. Dans `theme.json`, certains blocs exposent des réglages d'état (couleur au survol par exemple) qui se traduisent, une fois générés, en règles CSS avec pseudo-classe ciblant la classe du bloc.

## Exemple

```
.wp-block-button__link:hover {
  background-color: #1e3a8a;
}

.wp-block-post-title:first-of-type {
  margin-top: 0;
}
```

## Bon à savoir

- La pseudo-classe `:focus-visible` n'affiche l'indicateur de focus qu'à la navigation clavier, pas au clic à la souris : elle est préférable à `:focus` seul pour un site accessible.
- Contrairement à un pseudo-élément (un seul deux-points, comme `::before`), une pseudo-classe ne crée aucun contenu supplémentaire dans la page, elle ne fait que sélectionner un état.
- L'ordre des pseudo-classes de lien compte historiquement : LVHA (`:link`, `:visited`, `:hover`, `:active`) pour que chacune ait bien la priorité voulue.