# Sélecteur

> Un sélecteur CSS est le motif qui désigne, dans une règle de style, à quels éléments HTML de la page cette règle doit s'appliquer.

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

Avant même de parler de couleur ou de marge, une règle CSS commence toujours par répondre à une question : à qui ça s'adresse ? C'est le rôle du sélecteur, placé avant les accolades. Il peut viser une balise (`p`), une classe (`.entete`), un identifiant (`#zone-contact`), un attribut (`[type="email"]`), ou combiner plusieurs de ces critères avec des combinateurs (espace pour un descendant, `>` pour un enfant direct, `+` pour un frère adjacent).

## Fonctionnement dans WordPress

Chaque bloc de l'éditeur génère une classe prévisible, généralement `wp-block-nom-du-bloc` (par exemple `wp-block-paragraph` ou `wp-block-image`), qui sert de point d'accroche pour le style du thème ou d'un CSS personnalisé. Un identifiant HTML ajouté dans les réglages avancés d'un bloc devient lui aussi un sélecteur possible, utile pour cibler ce bloc précis plutôt que tous les blocs du même type.

## Exemple

```
/* tous les paragraphes à l'intérieur du bloc Groupe */
.wp-block-group p {
  line-height: 1.6;
}

/* seulement le bouton portant l'identifiant "cta-principal" */
#cta-principal {
  font-weight: bold;
}
```

## Pièges fréquents

- Un sélecteur trop générique (une simple balise `a` ou `p`) risque de déborder sur des zones du site qu'on ne voulait pas toucher, notamment dans l'éditeur de blocs partagé par tout le site.
- Deux sélecteurs peuvent viser le même élément avec des priorités différentes : c'est la spécificité, et non l'ordre d'écriture seul, qui tranche en cas de conflit.
- Les sélecteurs générés automatiquement par un bloc peuvent changer d'une version de WordPress à l'autre : mieux vaut ajouter sa propre classe plutôt que de s'appuyer uniquement sur les classes internes.