Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les règles de priorité en CSS

Les feuilles de styles complexes font souvent apparaître des contradictions entre les différentes règles. Cela se produit lorsqu'une propriété reçoit des valeurs différentes, avec des sélecteurs différents mais qui ciblent un ou plusieurs éléments identiques.

Cette page décrit le mécanisme standard de CSS pour résoudre ces conflits. Vous pourrez également vous reporter à la page sur la directive @layer qui permet de mettre en œuvre une autre gestion des priorités : les couches de cascade.

Les règles contradictoires.

Il arrive fréquemment que plusieurs règles CSS soient contradictoires. Cela se produit chaque fois que l'on tente d'affecter des valeurs différentes à une même propriété.

Par exemple, les deux règles CSS suivantes se contredisent sur le premier paragraphe. En effet, la première règle demande que l'élément dont l'identifiant est parag1 soit en rouge, tandis que la deuxième règle demande que les paragraphes soient en bleu. L'élément parag1 étant lui-même un paragraphe, il y a contradiction.

#parag1a {color:red;} .exemple1 {color:blue;}

Voici comment s'affichera le code présenté ci-dessus. On voit que ce n'est pas nécessairement la dernière règle rencontrée qui est prioritaire par rapport aux précédentes. Dans cet exemple on voit que le sélecteur par identifiant ( # ) est prioritaire sur un sélecteur par type d'élément ( p ).

On voit que le style appliqué sur l'ID (couleur rouge) est prioritaire sur celui qui est appliqué sur la classe (couleur bleue) bien que ce dernier soit énoncé après.

p id="parag1a" class="exemple1a"
Le premier paragraphe.
/p

p id="parag1b" class="exemple1"
Le deuxième paragraphe.
/p

p id="parag1b" class="exemple1"
Le troisième paragraphe.
/p

Les priorités des sélecteurs.

Rappel : le sélecteur est ce qui détermine sur quel(s) élément(s) une règle CSS s'applique. Dans l'exemple ci-dessous, le sélecteur est .encart. Il désigne tous les éléments comportant l'attribut class="encart".

.encart {border:solid 1px silver;}

Tous les sélecteurs n'ont pas la même priorité. En cas de contradiction entre deux règles, celle qui s'applique est celle qui a le sélecteur le plus prioritaire. De façon générale, les sélecteurs ont une priorité d'autant plus grande qu'ils sont plus précis. Le sélecteur très général * a une priorité de 0. A l'inverse, un sélecteur sur un identifiant , qui en principe ne concerne qu'un seul élément de la page, à une priorité de 100.

Pour déterminer la priorité d'un sélecteur, il faut considérer la logique suivante :

  1. Une règle avec la mention !important a une priorité de 10000.
  2. Une règle écrite dans l'attribut style d'une balise HTML a une priorité de 1000.
  3. Une règle avec un sélecteur sur un identifiant ( # ) a une priorité de 100.
  4. Une règle avec un sélecteur sur une classe ( . ) ou des pseudo-class ( : ) a une priorité de 10.
  5. Une règle avec un sélecteur sur un type d'élément ( p ) ou des pseudo-elements ( :: ) a une priorité de 1.
  6. Le sélecteur étoile ( * ) a une priorité de 0.

Les animations sont prioritaires par rapport à toutes les autres déclarations, sauf celles qui sont notées !important. Ce qui est logique sinon les animations ne pourraient jamais s'exécuter. Voir le tutoriel sur les animations en CSS.
Les transitions sont prioritaires par rapport à toutes les autres règles, y compris celles comportant la mention !important. Voir la propriété transition.

Lorsqu'un sélecteur comporte plusieurs parties combinées, les priorités de chacune des parties s'additionnent pour donner la priorité globale du sélecteur.
Une exception cependant : lorsque le sélecteur est composé de plusieurs parties séparées par des virgules, chaque partie est considérée comme un sélecteur à part entière. Chacune des parties peut éventuellement recevoir une priorité différente.

Enfin, lorsque deux règles contradictoires ont un sélecteur de même priorité, la dernière règle rencontrée remplace les valeurs définies par les règles précédentes.

Exemples :

/* Sélecteur sur un identifiant -> priorité = 100 */ #edito {color:blue;} /* Sélecteur sur une pseudo-classe -> priorité = 10 */ :link {color:inherit;} /* Sélecteur sur un type d'élément -> priorité = 1. */ p {font-size:1.1em;} /* Règle comportant la mention !important -> priorité = 10000 */ p {color:silver!important} /* Sélecteur désignant les images descendants l'élément #edit -> priorité = 101 */ #edit img {width:25%;} /* Sélecteur désignant les images enfants direct d'une cellule -> priorité = 2 */ td > img {width:100%;}

Quelques sélecteurs particuliers.

Les sélecteurs :is() et :has() prennent la priorité du sélecteur le plus sélectif parmi ceux passés en arguments.

:is(#edito, .introduction) /* Priorité = 100 (celle de #edito) */ :has(img) /* Priorité = 1 (celle d'un sélecteur par balise) */

Le sélecteur :not() prend la priorité du sélecteur passé en argument.

:not(:first-line) /* Priorité = 10 (celle d'une pseudo-classe) */

Le sélecteur :where() a une priorité de 0, bien que ce soit une pseudo-classe.

La valeur !important.

Le mot !important peut être ajouté à n'importe quelle valeur dans une règle CSS. Il rend la règle prioritaire. L'exemple ci-dessous est identique au premier sauf que !important figure dans la deuxième règle. On voit que la priorité des règles a été changée.

Le premier paragraphe.

Le deuxième paragraphe.

Remarque : la mention !important est à utiliser le moins possible.

L'emplacement des styles.

Les choses se compliquent si on considère que :

  • Plusieurs feuilles de styles peuvent être associées à une même page.
  • Des styles peuvent être écrits dans la page elle-même ou dans l'attribut style des balises HTML.
  • Le navigateur dispose de sa propre feuille de styles, appliquée à toutes les pages qu'il affiche.
  • L'utilisateur (l'internaute) peut lui-même définir ses propres styles.
    Pour cette raison nous devrons distinguer les styles de l'utilisateur (l'internaute) et les style de l'auteur (celui qui crée le les pages).
    Les styles de l'utilisateur sont peu utilisés et ont tendance à disparaître complètement. Voir le paragraphe sur les feuilles de styles utilisateur plus bas dans cette page.

Cela fait apparaître trois sortes de styles : les styles du navigateur, ceux de l'auteur (le web designer qui a travaillé sur le site) et ceux de l'utilisateur (l'internaute).

Le traitement de toutes ces feuilles de styles est effectué dans l'ordre suivant :

  • Le navigateur effectue une première résolution des conflits sur sa propre feuille de styles. Les valeurs obtenues seront utilisées si aucun autre style ne vient les modifier.
  • Dans un deuxième temps, il résout les conflits éventuels entre les sélecteurs de la feuille de styles de l'utilisateur. Les valeurs obtenues remplacent celles de la feuille de styles du navigateur.
  • Enfin le navigateur résout les conflits des sélecteurs sur la ou les feuilles de styles jointes à la page (balise link) et sur les styles décrits dans la page elle-même entre les balises style et /style). Les valeurs obtenues seront celles qui seront finalement utilisées.

Cependant, comme la possibilité laissée à l'utilisateur de définir ses propres styles est en voie de disparition, nous pouvons simplifier tout ça et considérer que :

  • Le navigateur affecte les valeurs définies dans sa propre feuille de styles après résolution des conflits éventuels.
  • Le navigateur résout les conflits de sélecteurs sur les styles de l'auteur et applique les valeurs obtenues à la place de celles de sa propre feuille de styles.

Il faut bien noter une chose qui est souvent mal comprise ; les styles écrits dans la page elle-même, entre des balises style et /style, en général dans le section head sont considérés avec la même priorité que les styles auteur provenant d'une feuille de styles externe. Firefox semble cependant leur donner un petit avantage en les explorant après les styles de la feuilles externe : ils peuvent donc être légèrement prioritaires si toutes les autres règles de priorité sont neutres.

En résumé, voici comment sont gérées les priorités entre les différentes feuilles de styles, en considérant également la valeur !important. La liste ci-dessous est triée du plus prioritaire au moins prioritaire.

  1. Les effets de transition.
  2. Les règles notées !important de la feuille de styles du navigateur.
  3. Les règles notées !important de la feuille de styles de l'utilisateur.
  4. Les règles notées !important de la feuille de styles de l'auteur.
  5. Les animations.
  6. Les règles de la feuille de styles de l'auteur.
  7. Les règles de la feuille de styles de l'utilisateur.
  8. Les règles de la feuille de styles du navigateur.

L'inspecteur.

Il existe un outil particulièrement pratique, fourni par la plupart des navigateurs et souvent nommé "l'inspecteur". On l'active en faisant un clic droit sur un des éléments de la page web affichée :
clic droit -> inspecter

L'inspecteur présente des quantités d'informations, aussi bien sur le code HTML, que sur les règles CSS appliquées à l'élément sur lequel on a cliqué. Il montre très bien en particulier la règle qui est active et celles qui ont été surchargées par une autre règle de priorité supérieure : les règles surchargées sont rayées.

L'inspecteur de styles, dans Chrome

La feuille de styles utilisateur.

La feuille de styles utilisateur permet à l'utilisateur, c'est à dire l'internaute, de définir ses propres styles, qui seront appliqués à toutes les pages affichées.

Cette possibilité est peu utilisée et n'est finalement pas très utile car les styles définis par l'utilisateur sont appliqués à toutes les pages, sans qu'il soit possible de faire de différence d'un site à l'autre.

Chrome a désactivé cette possibilité. Firefox ne l'active plus par défaut. Il est cependant possible de l'activer sur Firefox avec le flag toolkit.legacyUserProfileCustomizations.stylesheets (accéder aux flags sur Firefox). Il eput être nécessaire de redémarrer Firefox.

Les styles utilisateur doivent être écrits dans un fichier nommé userContent.css et enregistré dans le dossier de profil. Pour créer ou éditer ce fichier procéder de la façon suivante :

  • Taper about:support dans la barre d'adresse.
  • Chercher Profile folder et cliquer sur le bouton Open folder. Le dossier de profil s'ouvre dans l'explorateur Windows.
  • Créer si nécessaire un sous-dossier nommé chrome (en minuscules).
  • Créer ou éditer le fichier userContent.css : écrire les styles utilisateur dans ce fichier.
  • Redémarrer Firefox.

Et les attributs HTML ?

A une époque déjà lointaine, il était courant de définir une mise en forme directement par des attributs HTML.

h1font color="blue">Titre de la page/fonth1

Les styles CSS sont TOUJOURS prioritaires sur les attributs HTML autres que style. Les attributs tels que color, size, etc. ne devraient d'ailleurs plus être utilisés puisqu'ils ne sont plus standardisés depuis HTML5.

Évolution des règles de priorité.

La gestion des priorités est, pour l'essentiel, resté inchangée depuis la première version du langage CSS. Le niveau 3 a simplement pris en compte les animations et les transitions dans l'ordre des priorités.

Voir aussi, dans le même module de standardisation que ref-priorities.

Les spécifications CSS éditées par le W3C sont organisées en modules. ref-priorities fait partie du (). Les définitions suivantes sont également décrites dans ce même module.

Sélecteurs :

✗
::-moz-color-swatch
Pseudo-élément qui désigne l'échantillon de couleur associé à une balise input du type="color".
✗
::-moz-list-bullet
Pseudo-élément. Désigne les puces dans une liste à puces.
✗
::-moz-list-number
Pseudo-élément. Désigne les numéros dans une liste numérotée.
✗
::-moz-progress-bar
Pseudo-élément désignant la partie déjà parcourue d'une barre de progression.
✗
::-moz-range-progress
Peudo-élément correspondant à la partie de la glissière située à gauche du curseur.
✗
::-moz-range-thumb
Pseudo-élément correspondant au curseur d'une zone de saisie du type range.
✗
::-moz-range-track
Peudo-élément correspondant à la glissière d'une zone de saisie du type range.
✗
::-ms-browse
Pseudo-élément désignant le bouton parcourir d'une zone de saisie du type file.
✗
::-ms-check
Pseudo-élément désignant les cases à cocher et les boutons radio.
✗
::-ms-clear
Pseudo-élément désignant le bouton d'effacement d'une zone de saisie.
✗
::-ms-expand
Pseudo-élément désignant le bouton d'ouverture de la liste.
✗
::-ms-fill
Pseudo-élément correspondant à la partie déjà parcourue d'une barre de progression.
✗
::-ms-fill-lower
Pseudo-élément désignant la partie de la glissière à gauche du curseur (zone de saisie du type range).
✗
::-ms-fill-upper
Pseudo-élément désignant la partie de la glissière à droite du curseur (zone de saisie du type range).
✗
::-ms-reveal
Pseudo-élément correspondant au bouton d'affichage en clair du mot de passe.
✗
::-ms-thumb
Pseudo-élément désignant le curseur (zone de saisie du type range).
✗
::-ms-ticks-after
Pseudo-élément désignant la graduation d'une zone de saisie du type range.
✗
::-ms-ticks-before
Pseudo-élément désignant la graduation d'une zone de saisie du type range.
✗
::-ms-tooltip
Pseudo-élément correspondant aux info-bulles.
✗
::-ms-track
Pseudo-élément désignant la glissière d'une zone de saisie du type range.
✗
::-ms-value
Pseudo-élément correspondant à la valeur dans une zone de saisie.
✗
::-webkit-meter-bar
Pseudo-élément désignant l'échelle d'un élément du type meter..
✗
::-webkit-progress-bar
Pseudo-élément correspondant à la glissière d'une barre de progression (élément progress).
✗
::-webkit-progress-value
Pseudo-élément correspondant à la partie gauche d'une barre de progression.
✗
::-webkit-slider-runnable-track
Pseudo-élément correspondant à la glissière d'une zone de saisie du type range.
✗
::-webkit-slider-thumb
Pseudo-élément correspondant au curseur d'une zone de saisie du type range.

Propriétés :

✗
-moz-border-end
Propriété spécifique aux navigateurs Mozilla.
✗
-moz-border-start
Propriété spécifique aux navigateurs Mozilla.
✗
-moz-float-edge
Définit si les dimensions de l'élément incluent la marge, la bordure, les marges intérieures, ou seulement le contenu.
✗
-moz-force-broken-image-icon
Force le remplacement des images non trouvées par un pictogramme.
✗
-moz-image-region
Définit quelle zone de l'image doit être affichée (utilisable sur les puces personnalisées).
✗
-webkit-font-smoothing
Contrôle le lissage des caractères.
✗
-webkit-tap-highlight-color
Définit la couleur d'un lien qui a été touché ou cliqué.
✗
-webkit-text-stroke
Permet la mise en forme de caractères "creux".
border-start-start-radius
Définit le rayon de l'arrondi de l'angle en début de ligne et début de bloc.
✗
box-flex
Définit si un élément contenu dans un box peut s'agrandir pour occuper la place disponible.
✗
box-ordinal-group
Définit l'ordre d'un élément contenu dans un container box.
✗
box-orient
Définit si le container box affiche ses éléments horizontalement ou verticalement.
✗
box-pack
Définit le positionnement des éléments contenus dans un container box, suivant l'axe principal.
✗
box-reflect
Définit une duplication et un effet de symétrie sur un container box.
cx
Définit la position horizontale du centre d'un cercle ou d'une ellipse en SVG.
cy
Définit la position verticale du centre d'un cercle ou d'une ellipse en SVG.
✗
scrollbar-3dlight-color
Couleur de la bordure, coté éclairé.
✗
scrollbar-arrow-color
Couleur des flèches des barres de défilement.
✗
scrollbar-base-color
Couleur des barres de défilement.
✗
scrollbar-darkshadow-colo
Couleur de la partie ombrée des barres de défilement.
✗
scrollbar-face-color
Couleur du curseur dans une barre de défilement.
✗
scrollbar-highlight-color
✗
scrollbar-shadow-color
Couleur de l'ombre des barres de défilement.
✗
scrollbar-track-color
touch-action
Détermine quels sont les gestes traités par le navigateur sur un écran tactile (glissé du doigt, zoom par pincement...)

Fonctions :

⚠
env()
Récupère la valeur d'une variable d'environnement.