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.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.