Numérotation automatique des titres en CSS

Cet article vous présente une méthode permettant de numéroter automatiquement des éléments en CSS. La numérotation, principalement utilisée pour les titres, peut s’appliquer à n’importe quel élément HTML.

La numérotation automatique en CSS s’appuie sur deux possibilités offertes par CSS :

Ajouter un compteur sur un élément HTML avec counter-reset et counter-increment ;
Insérer du texte dans un élément HTML avec content.

Compter automatiquement les titres h1

Le code ci-dessous permet par exemple de numéroter automatiquement les éléments h1 de la page.

body {
    /* On initialise le compteur h1 */
    counter-reset: h1 ;
}
/* before est un pseudo-élément qui, combiné avec content, permet d'ajouter du texte avant un élément */ 
h1:before {
    /* On insert la valeur du compteur h1 suivi d'un point et d'un espace */
    content: counter(h1) ". " ;
    /* On incrémente la valeur du compteur h1 */
    counter-increment: h1 ;
}

body {    /* On initialise le compteur h1 */    counter-reset: h1 ;}/* before est un pseudo-élément qui, combiné avec content, permet d'ajouter du texte avant un élément */ h1:before {    /* On insert la valeur du compteur h1 suivi d'un point et d'un espace */    content: counter(h1) ". " ;    /* On incrémente la valeur du compteur h1 */    counter-increment: h1 ;}

Les compteurs utilisent des noms !

Les compteurs fonctionnent avec des noms et pas avec des sélecteurs CSS, vous pouvez donc donner le nom que vous souhaitez à votre compteur et l’appliquer à n’importe quel sélecteur CSS comme dans l’exemple ci-dessous.

body {
    /* On initialise le compteur nbquestion. Le nom du compteur n'est pas un sélecteur CSS, vous choisissez donc le nom qui vous convient. */
    counter-reset: nbquestion ;
}
/* before est un pseudo-élément qui, combiné avec content, permet d'ajouter du texte avant un élément */ 
.question:before { 
    /* On insert la valeur du compteur nbquestion suivi d'un point et d'un espace */
    content: counter(nbquestion) ". " ;
    /* On incrémente la valeur du compteur nbquestion */
    counter-increment: nbquestion ;
}

body {    /* On initialise le compteur nbquestion. Le nom du compteur n'est pas un sélecteur CSS, vous choisissez donc le nom qui vous convient. */    counter-reset: nbquestion ;}/* before est un pseudo-élément qui, combiné avec content, permet d'ajouter du texte avant un élément */ .question:before {     /* On insert la valeur du compteur nbquestion suivi d'un point et d'un espace */    content: counter(nbquestion) ". " ;    /* On incrémente la valeur du compteur nbquestion */    counter-increment: nbquestion ;}

Utiliser plusieurs compteurs pour plusieurs niveaux de titre

Il est évidemment possible de mettre plusieurs compteurs. Voici le code permettant de numéroter les titres sur deux niveaux.

body {
/* On initialise deux compteurs */     
    counter-reset: h1 h2 ; 
} 
h1:before {     
    content: counter(h1) "  " ;     
    counter-increment: h1 ; 
} 
h2:before {     
    /* On insére la numérotation sur deux niveaux */     
    content: counter(h1) "." counter(h2) "  " ;     
    counter-increment: h2 ; 
} 
h1 {
    /* On réinitialise le compteur pour le niveau deux à chaque titre de niveau 1 */
    counter-reset: h2;
}

body {/* On initialise deux compteurs */         counter-reset: h1 h2 ; } h1:before {         content: counter(h1) "  " ;         counter-increment: h1 ; } h2:before {         /* On insére la numérotation sur deux niveaux */         content: counter(h1) "." counter(h2) "  " ;         counter-increment: h2 ; } h1 {    /* On réinitialise le compteur pour le niveau deux à chaque titre de niveau 1 */    counter-reset: h2;}

Définir le type de numérotation

Il est possible de choisir le type de numérotation en ajoutant l’option dans counter() sous la forme counter( nom_du_compteur, format).

Format	Exemple
decimal	1, 2, 3, 4, 5, 6, 7, 8, 9, 10
decimal-leading-zero	01, 02, 03, 04, 05, 06, 07, 08, 09, 10
lower-alpha	a, b, c, d, e, f, g, h, i, j
upper-alpha	A, B, C, D, E, F, G, H, I, J
lower-roman	i, ii, iii, iv, v, vi, vii, viii, ix, x
upper-roman	I, II, III, IV, V, VI, VII, VIII, IX, X

De nombreux styles sont disponibles en fonction de la langue utilisée : arabic-indic, armenian, upper-armenian, lower-armenian, bengali, cambodian, khmer, cjk-decimal, devanagari, georgian, gujarati, gurmukhi, hebrew, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, tamil, telugu, thai, tibetan, lower-latin, upper-latin, cjk-earthly-branch, cjk-heavenly-stem, lower-greek, hiragana, hiragana-iroha, katakana, katakana-iroha.

Pour les plus acharnés, il est possible de personnaliser un format en utilisant @counter-style format { } et en modifiant la valeur de symbols.

@counter-style upper-alpha {
  system: alphabetic;
  symbols: A C E G I K M O Q S U W Y ;
}

@counter-style upper-alpha {  system: alphabetic;  symbols: A C E G I K M O Q S U W Y ;}

Spécifications CSS

counter-reset : https://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset
counter-increment : https://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
content : https://www.w3.org/TR/CSS21/generate.html#propdef-content
counter-style : https://www.w3.org/TR/css-counter-styles-3/#simple-alphabetic

Sauf mention contraire*, l’article Numérotation automatique des titres en CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.