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-resetetcounter-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 ;
}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 ;
}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;
}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 ;
}Spécifications CSS
counter-reset: https://www.w3.org/TR/CSS21/generate.html#propdef-counter-resetcounter-increment: https://www.w3.org/TR/CSS21/generate.html#propdef-counter-incrementcontent: https://www.w3.org/TR/CSS21/generate.html#propdef-contentcounter-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.