Ceci est une ancienne révision du document !
Table des matières
Numérotation automatique des titres par CSS
Il s'agit de créer un fichier CSS qui numérotera automatiquement les titres.
Contraintes :
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.
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 :
<h3 id="nocountDemo" class="nocount">Ce titre n'a pas de numéro</h3>
- et pour relancer la numérotation :
<h3 id="countAgain">Ce titre a un numéro</h3>
La numérotation reprend là où elle s'est arrêtée.
c'est autre chose. Il ne s'agit que des numéros.
Le CSS
Et voici le CSS :
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 }