Technologies References & Guides Feedback Search MDN Sign in

Technologies web pour développeurs CSS : Feuilles de style en cascade CSS Lists Compteurs CSS Change language | View in English

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

Table of contents
Utiliser les compteurs
Compteurs CSS
Imbriquer des compteurs Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui
Spécifications permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en
Voir aussi forme du contenu en fonction de son emplacement dans le document.

La valeur d'un compteur peut être manipulée grâce aux propriétés counter-reset . counter-increment
Related Topics
et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété

Learn CSS content .

CSS first steps

Utiliser les compteurs
CSS building blocks
Manipuler la valeur d'un compteur
Styling text
Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de counter-

CSS layout reset . Pour incrémenter un compteur initialisé, on peut utiliser counter-increment . Attention le nom du
compteur ne peut pas être none , inherit ou initial .
Reference

Modules
Afficher un compteur
Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction counter ou counters dans
Properties une propriété content .

Selectors
La fonction counter() prend deux formes : counter(nom) ou counter(nom, style) . Le texte ainsi
généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style
Pseudo-classes
indiqué (par défaut, c'est decimal ).

Pseudo-elements
La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom,
At-rules chaine style) . Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du
pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument.
Types Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal ).

Guides
Exemple simple
Animations
Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur

Backgrounds and Borders

du compteur> : ».

Box alignment Note : La fonction counter() et la fonction counters() peuvent toutes les deux prendre un dernier
argument qui correspond au style de liste utilisé (par défaut, c'est decimal ).
Box model

Columns CSS
Conditional rules body {
counter-reset: section; /* On initialise le compteur à 0 */
CSSOM view }

Flexbox h3::before {
counter-increment: section; /* On incrémente le compteur section */
content: "Section " counter(section) " : "; /* On affiche le compteur */
Flow layout
}

Fonts

Grid
HTML
<h3>Introduction</h3>
Images
<h3>Corps</h3>
<h3>Conclusion</h3>
Lists and counters

Logical properties
Résultat
Media queries

Positioning

Scroll snap

Shapes

Text Imbriquer des compteurs

Transforms Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En
utilisant la fonction counters() , on peut insérer une chaîne de caractères entre les différents niveaux des
Transitions compteurs imbriqués.

Layout cookbook
CSS
Media objects

Columns
ol {
Center an element counter-reset: section; /* On crée une nouvelle instance du
compteur section avec chaque ol */
Sticky footers list-style-type: none;
}
Split navigation

Breadcrumb navigation li::before {

counter-increment: section; /* On incrémente uniquement cette
List group with badges instance du compteur */
content: counters(section,".") " "; /* On ajoute la valeur de toutes les
Pagination instances séparées par ".". */
/* Si on doit supporter < IE8 il faudra
Card
faire attention à ce qu'il n'y ait
Grid wrapper aucun blanc après ',' */
}
Tools

Color picker

Box shadow generator HTML

Border image generator
<ol>
<li>item</li> <!-- 1 -->
<li>item <!-- 2 -->
<ol>
<li>item</li> <!-- 2.1 -->
<li>item</li> <!-- 2.2 -->
<li>item <!-- 2.3 -->
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
</ol>
<ol>
<li>item</li> <!-- 2.3.1 -->
<li>item</li> <!-- 2.3.2 -->
<li>item</li> <!-- 2.3.3 -->
</ol>
</li>
<li>item</li> <!-- 2.4 -->
</ol>
</li>
<li>item</li> <!-- 3 -->
<li>item</li> <!-- 4 -->
</ol>
<ol>
<li>item</li> <!-- 1 -->
<li>item</li> <!-- 2 -->
</ol>

Résultat

Spécifications
Spécification État Commentaires

CSS Lists Module Level 3

Version de travail Aucune modification.
La définition de 'CSS Counters' dans cette spécification.

CSS Level 2 (Revision 1)

Recommendation Définition initiale.
La définition de 'CSS Counters' dans cette spécification.

Voir aussi
counter-reset
counter-set
counter-increment
@counter-style

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.

Last modified: 12 juil. 2021, by MDN contributors

Change your language

Français Change language

Web Technologies About

Learn Web Development MDN Web Docs Store

About MDN Contact Us

Feedback Firefox

MDN Mozilla

© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.

Terms Privacy Cookies