Fonction counters

 

CSS - Fonction counters()

Description de la fonction counters().

La fonction counters() renvoie une numérotation hiérarchique. C'est à dire une numérotation à plusieurs niveaux, comme dans l'exemple ci-dessous.

• 1 - Instruments à vent.
• 1.1 - Trompette.
• 1.2 - Saxophone.
• 2 - Instruments à percussion.
• 2.1 - Tambour.
• 2.2 - Xylophone.

La fonction counters() peut être utilisée avec :

• content : Ajoute du contenu dans le document.

Syntaxe de la fonction counters().

• content: counters(cpt1, '.', decimal); n c t

  1. n est le nom du compteur. Celui devra être initialisé avec la propriété counter-reset et incrémenté avec la propriété counter-increment.
  2. c est le caractère qui sera utilisé pour séparer les différentes parties de la numérotation. C'est souvent le point, mais on peut envisager un tiret ou, plus rarement, plusieurs caractères.
  3. t est le type de numérotation à utiliser : decimal, lower-roman, lower-alpha, etc.
     Reportez vous à la description de la fonction counter() pour une description plus complète des types de numérotations prédéfinies.

Exemples.

Cliquez sur les exemples ci-dessous pour afficher le code CSS correspondant, ainsi que l'imbrication des balises ul et li, à bien respecter pour le fonctionnement des compteurs.

ul
• liDirectives :
  ul
  • li@charset/li
  • li@import/li
  • liEtc./li
  /ul
  /li
• liPropriétés :
  ul
  • liPropriétés raccourcies :
    ul
    • libackground/li
    • liborder/li
    • liEtc./li
    /ul
    /li
  • liPropriétés individuelles :
    ul
    • libackground-image/li
    • libackground-color/li
    • liEtc./li
    /ul
  /li
  /ul
  /li
• liFonctions :
  ul
  • liurl()/li
  • licounter()/li
  • liEtc./li
  /ul
/li /ul

ul
• liDirectives :
  ul
  • li@charset/li
  • li@import/li
  • liEtc./li
  /ul
  /li
• liPropriétés :
  ul
  • liPropriétés raccourcies :
    ul
    • libackground/li
    • liborder/li
    • liEtc./li
    /ul
    /li
  • liPropriétés individuelles :
    ul
    • libackground-image/li
    • libackground-color/li
    • liEtc./li
    /ul
  /li
  /ul
  /li
• liFonctions :
  ul
  • liurl()/li
  • licounter()/li
  • liEtc./li
  /ul
/li /ul