counter-reset
=============

La propriété **`counter-reset`** permet de réinitialiser un compteur CSS avec une valeur donnée.

Exemple interactif
------------------

**Note :** Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS `counter-increment`.

Syntaxe
-------


```css
/\* On réinitialise nom-compteur à 0 \*/
counter-reset: nom-compteur;

/\* On réinitialise nom-compteur à -1 \*/
counter-reset: nom-compteur -1;

/\* On initialise compteur1 à 1 et compteur2 à 4 \*/
counter-reset: compteur1 1 compteur2 4;

/\* On annule toute réinitialisation qui aurait
 pu être déclarée avec des règles moins spé-
 cifiques \*/
counter-reset: none;

/\* Valeurs globales \*/
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
```


Cette propriété se définit grâce à :

* un identifiant (`<custom-ident>`) qui représente le compteur, éventuellement suivi par un entier (`<integer>`). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.
* ou grâce au mot-clé `none`.
### Valeurs

`<custom-ident>`

Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre `a` et `z` (sensible à la casse), de nombres compris entre `0` et `9`, de tirets bas (`_` ou *underscores*) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être `none`, `unset`, `initial` ou `inherit` quelque soit la combinaison de la casse.

`<integer>`

La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est `0`.

`none`

Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

Syntaxe formelle
----------------
```

counter-reset =   
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |  
  none                                                  
  
<reversed-counter-name> =   
  reversed( <counter-name> )    
  
```

Exemples
--------

### CSS


```css
ol {
  list-style-type: none;
  counter-reset: compteListe;
}

li::before {
  counter-increment: compteListe;
  content: counter(compteListe) " ";
}

.reinit {
  counter-reset: compteListe;
}
```

### HTML


```html
<ol>
  <li>Et de un</li>
  <li>Et de deux</li>
  <li>Et de trois</li>
  <li class="reinit">Et ça repart</li>
  <li>Et de deux</li>
</ol>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # counter-reset |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les compteurs CSS
* `counter-increment`
* `@counter-style`
* `counter-set`
* `counter()` et `counters()`
* `content`