Je kunt een geordende lijst (ol) in HTML eenvoudig laten starten vanaf een ander nummer dan 1 door gebruik te maken van de start attributen in HTML of de counter-reset eigenschap in CSS. Hieronder leg ik beide methoden uit.
Methode 1: OL via HTML aanpassen
In HTML kun je het start attribuut gebruiken om het startnummer van een geordende lijst te specificeren:
<ol start="5"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Deze code zorgt ervoor dat de lijst begint bij nummer 5.
Methode 2: CSS counter-reset list
In CSS kun je de counter-reset eigenschap gebruiken om een lijst op een ander nummer te laten beginnen. Dit doe je door de counter voor de geordende lijst opnieuw in te stellen. Hier is een voorbeeld:
<ol class="custom-start"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
En deze CSS heb je nodig in je stylesheet.
.custom-start { counter-reset: list-counter 4; /* 4 betekent dat de lijst zal beginnen bij 5 */ } .custom-start li { counter-increment: list-counter; } .custom-start li::before { content: counter(list-counter) ". "; }
In deze CSS-code
- counter-reset: list-counter 4; – Hiermee reset je de teller voor de lijst en start je deze bij 4. Omdat de teller vóór het eerste item wordt geïncrementeerd, zal het eerste item 5 zijn.
- counter-increment: list-counter; – Dit zorgt ervoor dat de teller voor elk item in de lijst wordt verhoogd.
- content: counter(list-counter) “. “; – Hiermee voeg je de tellerwaarde toe vóór elk lijstitem, gevolgd door een punt en een spatie.
Je kunt het startnummer van een geordende lijst in HTML eenvoudig aanpassen door het start attribuut te gebruiken. Voor meer geavanceerde styling en flexibiliteit kun je de counter-reset eigenschap in CSS gebruiken. Beide methoden geven je de mogelijkheid om je lijsten precies zo te nummeren als je wilt.