# Cascade

> Ensemble de règles qui déterminent, parmi plusieurs déclarations CSS concurrentes sur un même élément, laquelle sera effectivement appliquée.

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

« Pourquoi ma couleur ne s'applique-t-elle pas ? » est sans doute la question la plus posée par quiconque débute en CSS. La réponse tient presque toujours au même mécanisme : plusieurs règles visent le même élément, et un ordre de priorité, pas toujours intuitif, choisit laquelle l'emporte.

## Trois critères, dans un ordre précis

Le nom de ce mécanisme vient d'ailleurs directement du sigle CSS lui-même (Cascading Style Sheets). L'arbitrage se fait dans cet ordre : d'abord l'origine et l'importance de la règle (styles du navigateur, de l'auteur, puis règles marquées `!important`), ensuite la spécificité du sélecteur, enfin, à égalité parfaite, l'ordre d'apparition dans le document, la dernière déclarée l'emportant.

Sur un site WordPress, cette mécanique explique pourquoi les styles d'un thème enfant, chargés après ceux du thème parent via `wp_enqueue_style()` avec la bonne dépendance, peuvent surcharger ces derniers sans même être plus spécifiques.

## Exemple

```
p { color: black; }         /* spécificité 0,0,1 */
.article p { color: navy; } /* spécificité 0,1,1 : l'emporte */
```

## Bon à savoir

- Les propriétés personnalisées (variables CSS) suivent elles aussi ce mécanisme, mais leur résolution finale ne se fait qu'au moment où elles sont utilisées via `var()`, pas à leur déclaration.
- Les calques introduits par `@layer` s'insèrent avant l'étape de spécificité dans cet arbitrage, ce qui en fait l'outil moderne recommandé plutôt que la multiplication de sélecteurs très spécifiques.
- Un style en ligne (attribut `style`) dépasse en priorité n'importe quel sélecteur d'une feuille externe, sauf face à un `!important` déclaré dans cette dernière.