CSS Counters
Counters in CSS zijn "variabelen" die worden bijgehouden door waarden, deze kunnen worden verhoogd door CSS code om bij te houden hoe vaak ze worden gebruikt. Met counters kun je het uiterlijk van de inhoud aanpassen op basis van de plaatsing ervan in het document.
Automatische nummering met counters
Om met CSS counters te werken, gebruiken we de volgende eigenschappen:
counter-reset |
- | Creëert of reset een teller. | |
counter-increment |
- | Verhoogt een tellerwaarde. | |
content |
- | Voegt gegenereerde inhoud in. | |
counter() of counters() |
- | Voegt de waarde van een teller toe aan een element. |
Om een CSS counter te gebruiken, moet deze eerst worden gemaakt met de eigenschap counter-reset.
Voorbeeld:
body {
counter-reset: teller;
}
h3::before {
counter-increment: teller;
content: "Hoofdstuk " counter(teller) ": ";
}
CSS counters nestelen
In het volgende voorbeeld wordt een counter gemaakt voor de titel deze noemen we (teller) en er wordt een counter gemaakt voor elk <h3> element (subteller).
Voorbeeld:
body {
counter-reset: teller;
}
h2 {
counter-reset: subteller;
}
h2::before {
counter-increment: teller;
content: "Hoofstuk " counter(teller) ". ";
}
h3::before {
counter-increment: subteller;
content: counter(teller) "." counter(subteller) " ";
}
Counter met romeinse cijfers
Voorbeeld:
body {
counter-reset: teller;
}
h3::before {
counter-increment: teller;
content: "Hoofdstuk " counter(teller, upper-roman) ": ";
}
 |
Vergeet niet voordat je een CSS counter kan gebruiken, dat je deze eerst moet aanmaken met de eigenschap counter-reset anders zal de counter niet werken. |
