1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: counter-reset
slug: Web/CSS/counter-reset
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/counter-reset
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>counter-reset</code></strong> permet de réinitialiser un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> avec une valeur donnée.</p>
<div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<div class="note">
<p><strong>Note :</strong> Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<p>Cette propriété se définit grâce à :</p>
<ul>
<li>un identifiant (<code><custom-ident></code>) qui représente le compteur, éventuellement suivi par un entier (<code><integer></code>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.</li>
<li>ou grâce au mot-clé <code>none</code>.</li>
</ul>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt>
<dd>Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) 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 <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
<dt>{{cssxref("<integer>")}}</dt>
<dd>La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est <code>0</code>.</dd>
<dt><code>none</code></dt>
<dd>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.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">ol {
list-style-type: none;
counter-reset: compteListe;
}
li::before {
counter-increment: compteListe;
content: counter(compteListe) " ";
}
.reinit {
counter-reset: compteListe;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
<td>{{Spec2('CSS3 Lists')}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.counter-reset")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a></li>
<li>{{cssxref("counter-increment")}}</li>
<li>{{cssxref("@counter-style")}}</li>
<li>{{cssxref("counter-set")}}</li>
<li>{{cssxref("counter")}} et {{cssxref("counters")}}</li>
<li>{{cssxref("content")}}</li>
</ul>
|
