mozilla

Compteurs CSS

Résumé

Les compteurs CSS sont une implémentation de Automatic counters and numbering (en) dans CSS 2.1. La valeur du compteur est manipulée à l'aide de counter-reset et de counter-increment, et elle est affichée dans la page en utilisant les fonctions counter() ou counters() de la propriété content.

Utilisation des compteurs

Pour utiliser un compteur CSS, il faut commencer par le réinitialiser à une valeur donnée, 0 par défaut. Pour ajouter la valeur d'un compteur à un élément, utilisez la fonction counter(). L'exemple suivant ajoute au début de chaque en-tête h1 le contenu « Section valeur du compteur : » :

  body {
    counter-reset: section;                       /* Réinitialise le compteur de section à 0 */
  }
  h1:before {
    counter-increment: section;                   /* Incrémente le compteur de section */
    content: "Section " counter(section) " : ";   /* Affiche le compteur */
  }

Imbrication de compteurs

Un compteur CSS est particulièrement utile pour les listes de descriptions, car une nouvelle instance du compteur est automatiquement créée dans les éléments enfants. Par l'utilisation de la fonction counters(), une chaîne peut être insérée entre les différents niveaux des compteurs imbriqués :

  ol {
    counter-reset: section;                /* Créé une nouvelle instance du compteur
                                              de section pour chaque élément ol */
    list-style-type: none;
  }
  li:before {
    counter-increment: section;            /* Incrémente uniquement cette instance
                                              du compteur de section */
    content: counters(section, ".") " ";   /* Ajoute la valeur à toutes les instances
                                              du compteur de section séparées par un ".". */
}

Avec le code HTML suivent :

<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>

Spécifications

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, Fredchat, FredB, Kyodev, Delapouite
Dernière mise à jour par : teoli,
Masquer la barre latérale