Propriété CSS counter-increment
La propriété CSS counter-increment augmente ou diminue la valeur des compteurs. Voir des exemples avec les valeurs de la propriété.
La propriété counter-increment définit de combien les valeurs des compteurs doivent augmenter ou diminuer. Cette propriété est utilisée avec les propriétés content et counter-reset.
La propriété counter-increment est spécifiée par deux valeurs : none et des nombres d'identifiant. « None » est la valeur par défaut de cette propriété. Elle permet d'utiliser des valeurs négatives dans le cas de la valeur « id number ». L'incrément par défaut est de 1. Si l'identifiant du compteur n'est pas initialisé par counter-reset, la valeur par défaut est 0. La valeur du compteur peut être définie sur un nombre arbitraire avec la propriété counter-reset.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Non. |
| Animatable | Discrète. |
| Version | CSS2 |
| Syntaxe DOM | object.style.counterIncrement = "subsection"; |
Syntaxe
Syntaxe de la propriété CSS counter-increment
counter-increment: none | id number | initial | inherit;Exemple de la propriété counter-increment :
Exemple de la propriété CSS counter-increment
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Résultat
Exemple de la propriété counter-increment avec des sections et sous-sections numérotées :
Propriété CSS counter-increment avec la valeur subsection
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Exemple de la propriété counter-increment avec des chiffres romains :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| none | Les compteurs ne sont pas incrémentés. C'est la valeur par défaut. |
| id number | Id définit quel compteur incrémenter. Number définit de combien le compteur sera incrémenté. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |