blob: b42659b39568034ccc03eba8de2cfc7542854ffa (
plain)
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
|
---
title: counter-increment
slug: Web/CSS/counter-increment
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/counter-increment
---
{{CSSRef}}
La propriété **`counter-increment`** est utilisée afin d'augmenter la valeur d'un [compteur CSS](/fr/docs/Web/CSS/Compteurs_CSS) d'une valeur donnée.
{{EmbedInteractiveExample("pages/css/counter-increment.html")}}
> **Note :** La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.
## Syntaxe
```css
/* On incrémente 'mon-compteur' de 1 */
counter-increment: mon-compteur;
/* On réduit 'mon-compteur' de 1 */
counter-increment: mon-compteur -1;
/* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 */
counter-increment: compteur1 compteur2 -4;
/* On n'incrémente/décremente rien */
/* cela permet d'effacer les règles moins spécifiques */
counter-increment: none;
/* Valeurs globales */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
```
La propriété `counter-increment` peut être définie de deux façons :
- Avec le mot-clé `none`
- Avec un identifiant ({{cssxref("<custom-ident>")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("<integer>")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.
### Valeurs
- {{cssxref("<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.
- {{cssxref("<integer>")}}
- : La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).
- `none`
- : Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.
### Syntaxe formelle
{{csssyntax}}
## Exemples
### CSS
```css
ol {
list-style-type: none;
counter-reset: compteListe;
}
li::before {
counter-increment: compteListe 2;
content: counter(compteListe) " ";
}
```
### HTML
```html
<ol>
<li>Et de deux</li>
<li>Et de quatre</li>
<li>Et de six</li>
</ol>
```
### Résultat
{{EmbedLiveSample("Exemples")}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
| {{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. |
| {{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}} | {{Spec2("CSS2.1")}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.counter-increment")}}
## Voir aussi
- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/Compteurs_CSS)
- {{cssxref("counter-reset")}}
- {{cssxref("counter-set")}}
- {{cssxref("@counter-style")}}
- Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}
|
