{{tag>Logiciel}}

====== Numérotation automatique des titres par CSS ======

Il s'agit de créer un fichier CSS qui numérotera automatiquement les titres.

Contraintes :
??? démarrer à h2**
!!! h1 est réservé au titre de la page - il ne doit donc pas être numéroté. Le premier titre à numéroter est donc le premier élément h2.
  ??? pouvoir désactiver la numérotation pour un titre donné**
Il est parfois utile d'inclure un titre sans numérotation, il faut donc pouvoir la désactiver.

La méthode habituelle consiste à définir une classe **nocount**.

Exemple :
  * voici un h3 qui n'incrémente pas le compteur :<code - ><h3 id="nocountDemo" class="nocount">Ce titre n'a pas de numéro</h3></code>
  * et pour relancer la numérotation :<code - ><h3 id="countAgain">Ce titre a un numéro</h3></code>La numérotation reprend là où elle s'est arrêtée.
  ??? Ici, il ne s'agit pas de donner un style aux titres
!!! c'est autre chose. Il ne s'agit que des numéros.

==== Le CSS ====

Et voici le CSS :<code - >
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}

h2:before {counter-increment: h2; content: counter(h2) ". "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}

h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }
</code>

David Storey donne une bonne explication satisfaisante dans son article intitulé **[[http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/|Automatic numbering with CSS Counters]]** (numérotation automatique à l'aide de compteurs CSS).

En gros, vous définissez d'abord vos compteurs (en les réinitialisant), puis vous les incrémentez et les insérez au contenu généré en utilisant la pseudo-classe :before

=== Surveillez la cascade ! ===

Pour utiliser le moins de lignes de CSS possible, j'ai d'abord essayé cela :<code - >
h2 {counter-reset:h2; counter-reset:h3; counter-reset:h4; counter-reset:h5; counter-reset:h6;}</code>

Pourquoi cela ne fonctionne-t-il pas ? C'est le C dans CSS - la cascade. Vous produisez une série de valeurs différentes pour la même propriété et chacune d'entre elles remplace l'autre, de sorte qu'en fait, ici, le seul compteur remis à zéro est le dernier.

==== Pré-requis ====

==== Installation ====

==== Configuration ====

==== Utilisation ====

==== Désinstallation ====

==== Voir aussi ====

  * **(en)** [[https://philarcher.org/diary/2013/headingnumbers/]]

----
//Basé sur << [[https://philarcher.org/diary/2013/headingnumbers/|Automatic Heading Numbers with CSS]] >> par Phil Archer.//