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 ;>
}

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;
}

Spécifications CSS

Cela peut vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.