Accueil    CSS    Propriété Counter-increment
 



style css counter-increment  Style CSS counter-increment

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété counter-increment permet de définir un compteur sur une classe spécifique qui s'auto-incrémente à chaque occurence de cette classe dans le document. Elle est utilisée avec la propriété "content" et les pseudos élément ":before" et ":after" pour ajouter un compteur autour d'un élément html.

La plupart des éléments html peuvent ainsi voir leur contenu étendu par cette propriété à l'exception notamment de la balise <img>. Il faut également intégrer un <!doctype> pour que la propriété content s'applique correctement pour certains navigateurs comme Internet Explorer.



Propriétés pour le style counter-increment :




Propriété Définition Valeurs CSS
counter-increment Instancie un compteur sur une classe css qui s'auto-incrémente à chaque occurence de celle-ci dans la page identifiant
inherit
none
CSS 2


Exemple d'utilisation du style css clear :





Utilisation des propriétés counter-increment et counter-reset :

<p class="para-exemple">Exemple de texte inclus dans l'élément paragraphe</p>
<p class="para-exemple">Exemple de texte inclus dans l'élément paragraphe</p>
<p class="para-exemple">Exemple de texte inclus dans l'élément paragraphe</p>

<label class="reset">reset du compteur</label>

<span class="span-exemple">Exemple de texte inclus dans l'élément span</span>
<span class="span-exemple">Exemple de texte inclus dans l'élément span</span>
<span class="span-exemple">Exemple de texte inclus dans l'élément span</span>


Le style associé est le suivant :

<style type="text/css">
   .para-exemple{counter-increment: Index;}
   .para-exemple:before{content:"paragraphe numéro " counter(Index) " : ";}
   .span-exemple{counter-increment: Index;}
   .span-exemple:before{content:"span numéro " counter(Index) " : ";}
   .reset{counter-reset: Index;}
</style>


Utilisation des propriétés counter-increment et counter-reset :

Exemple de texte inclus dans l'élément paragraphe

Exemple de texte inclus dans l'élément paragraphe

Exemple de texte inclus dans l'élément paragraphe




Exemple de texte inclus dans l'élément span
Exemple de texte inclus dans l'élément span
Exemple de texte inclus dans l'élément span