Inhoudstellers in CSS worden gebruikt om automatisch nummers of andere types van lijsten te breken. Dit wordt veel gebruikt in juridische documenten, rapporten, boeken etc. waar structuur belangrijk is. Hier is een basis voorbeeld van hoe je inhoudstellers in CSS gebruikt:
CSS:
```
body {
counter-reset: sectie;
}
h1 {
counter-reset: subsectie;
}
h1:before {
counter-increment: sectie;
content: “Sectie “ counter(sectie) “. “;
}
h2:before {
counter-increment: subsectie;
content: counter(sectie) “.” counter(subsectie) “ “;
}
```
HTML:
```
Dit produceert de volgende genummerde rubriek:
Sectie 1. Inhoud
1.1 Ondersectie
1.2 Ondersectie
Sectie 2. Inhoud
2.1 Ondersectie
Hier, `counter-reset` initialiseert de teller naar nul. `counter-increment` verhoogt de waarde van de teller met één elke keer als het wordt aangeroepen. `content` voegt de waarde van de teller toe in de inhoud van het element waar het aan is toegepast. ‘Sectie’ en ‘subsectie’ zijn namen gegeven aan de tellers en kunnen alles zijn dat je wil.
Het belangrijkste om te onthouden is dat tellers worden geïncrementeeerd in de volgorde van broncode. Als je HTML niet gestructureerd is en je een h1 tag hebt na een h2 tag, dan zal de nummering incorrect zijn. Dus zorg ervoor dat de structuur van je HTML correct is.
