Accueil    CSS    Propriété Counter-reset
 



style css counter-reset  Style CSS counter-reset

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


La propriété counter-reset permet de réinitialiser un compteur appliqué à une classe. Lorsqu'un élément html fera appel à la classe employant cette propriété, le compteur reprendra sa numérotation à 1 lorsqu'il sera à nouveau référencé par une classe du document.

Elle est utilisée avec les propriétés "counter-increment" et "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-reset :




Propriété Définition Valeurs CSS
counter-reset Réinitialise un compteur counter-increment existant identifiant
inherit
none
CSS 2


Exemple d'utilisation du style css counter-reset :





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