Compter le nombre d’éléments en CSS

Old books
© Tabsinthe

Décidément, tous les jours je suis bluffée par le CSS ! Saviez-vous qu’il était possible de compter automatiquement des lignes, des blocs, des entités HTML en CSS ? Je ne parle pas de l’utilisation des balises <ol> qui permettent de compter les éléments d’une liste. Je veux parler de la fonction counter() !

On peut imaginer toutes sortes de cas dans lesquels il serait utile de compter automatiquement des éléments. A titre d’exemple, on pourrait s’en servir pour compter et numéroter les différents sous-titres d’une page, sans que cette donnée de lecture apparaisse pour le référencement. On pourrait aussi ajouter le nombre de lignes que possède un bloc de code, et ainsi empêcher que ses chiffres apparaissent lors d’un copier/coller. On pourrait aussi numéroter les images d’une seule page, en les indiquant au lecteur grâce à des annotations du style Fig.1 dans les légendes de ces images.

Utiliser la fonction counter

Afin d’utiliser cette fonction, il tout d’abord instancier l’élément que l’on souhaite compter. Dans l’exemple que je vais vous donner ci-dessous, je vais m’amuser à compter les balises h2 présentes sur une page, dans le but d’afficher un compte précis pour l’ensemble des sous-titres d’une page. Mais gardez à l’esprit que ce comportement est valable pour tout élément d’un code HTML.

body { // Je précise l'élément <body> ici, mais vous pouvez décider de compter votre nombre d'éléments dans un contexte précis
   counter-reset: subtitleCounter; // Ici, on instancie le compteur que l'on souhaite utiliser
}

Il faut ensuite indiquer au langage CSS quel est l’élément que l’on souhaite incrémenter à chaque utilisation dans notre code HTML, et donc préciser le compteur que l’on souhaite utiliser pour ces actions.

h2 { // Je compte donc tous les <h2> présents dans la page
   counter-increment: subtitleCounter; // Attention à bien utiliser le même nom pour le compteur
}

Après, on peut utiliser cet élément pour l’affichage du nombre d’éléments de type h2 devant chacun des sous-titres présent dans le contenu textuel de la page HTML.

h2:before { // A l'aide du sélecteur CSS before...
   content: counter(subtitleCounter); // On ajoute le nombre d'élément devant le <h2>
}

Voilà tout ! Je dois bien vous avouer que cette fonctionnalité existe depuis bien longtemps puisque même Internet Explorer 8 est capable de l’implémenter ! Mais pour ma part, c’est une fonction que je découvre tout juste cette semaine, et qui me permettra de repenser l’organisation de bien des éléments dans mes pages HTML.

En dernier lieu, je vous propose, comme d’habitude, de visiter le site Can I Use pour connaître de manière précise le support des navigateurs vis-à-vis de cette fonction.

2 réflexions sur « Compter le nombre d’éléments en CSS »

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.