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.