Ils permettent de créer des compteurs automatiques, notamment pour numéroter des éléments, tels des éléments de listes, ou des titres.
counter-reset
Cette propriété CSS permet d’activer un ou plusieurs compteurs avec un nom et un numéro d’initialisation facultatif. Par défaut ce numéro vaut 0.
counter-reset: titre1;
counter-reset: titre1 titre2 titre3;
counter-reset: titre1 2 titre2;
Dans l’exemple 1, un compteur titre1
est créé. Dans l’exemple 2, trois compteurs sont créés. Dans le dernier exemple, un compteur titre1
qui débutera à 2 et un compteur titre2
qui débutera à 0 sont créés.
Cette propriété est à utiliser sur un élément parent, tel le body
pour une numérotation de titres, ou sur un ul
pour une numérotation de liste.
counter-increment
Cette propriété permet d’incrémenter le compteur défini avec counter-reset
. Pour cela, on spécifie le nom du compteur à utiliser avec éventuellement un numéro qui indique de combien le compteur est augmenté.
counter-increment: titre1;
counter-increment: titre1 2;
counter-increment: titre1 titre2;
Dans l’exemple 1, le compteur titre1
est incrémenté de 1. Dans l’exemple 2, le compteur titre1
est incrémenté de 2. Dans le dernier exemple, les compteurs titre1
et titre2
sont incrémentés de 1.
Affichage des compteurs
Pour cela, les pseudo-éléments ::after
ou ::before
(ou d’autres) sont détournés et sont associés à la fonction counter
. Voici quelques exemples :
h1::before{
content: counter(titre1);
}
h1::before{
content: counter(titre1) "-";
}
h2::before{
content: counter(titre1) "." counter(titre2) "-";
}
La spécification CSS3 envisage l’utilisation d’un pseudo-éléments spécifique pour cela ::marker
, mais il n’existe aucun support actuellement.
Dans l’exemple 1, tous les h1
utilise le compteur titre1
. Dans l’exemple 2, tous les h1
utilise le compteur titre1
lequel est suivi d’un tiret. Dans le dernier exemple, tous les h2
utilisent le compteur titre1
, suivi d’un point, suivi du compteur titre2
, suivi d’un tiret.
Les styles de compteurs
Par défaut, le style des compteurs est de type decimal
. Les styles disponibles sont ceux utilisés avec list-style-type
: (non exhaustif)
-
decimal
: 1,2,3... -
decimal-leading-zero
:01,02,03... -
lower-roman
: i,ii,iii,iv,v... -
upper-roman
: I,II,III,IV... -
lower-latin
oulower-alpha
: a,b,c... -
upper-latin
ouupper-alpha
: A,B,C... -
lower-greek
: α, β, γ...
#1par Sean Polak, le 20 décembre 2012
Merci pour ses infos, c’est super intéressant !
#2par Offrande, le 5 février 2013
Vraiment utile ton site :)
Bravo et merci pour les infos !
#3par Anonyme, le 5 mars 2013
Sympas ton site, vraiment utile. Mais j’ai quand même une petite question, où doit-on appliquer list-style-type ? J’ai essayé dans les titres, dans les compteurs ...
Donc si tu pouvais en mettre un exemple s’il te plait ?
#4par Anonyme, le 5 mars 2013
En fait j’ai trouvé c’est bon ^^ :
h2 ::before
content : counter(titre1, upper-roman) ". " ;
merci pour ton site, tout est bien expliqué et commenté, bonne continuation.