Vos résultats de recherche

    counter

    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

    Contributeurs ayant participé à cette page : teoli
    Dernière mise à jour par : teoli,