CSS -tellers
Pizza
Hamburger
Hotdogs
CSS-tellers zijn "variabelen" die worden onderhouden door CSS waarvan de waarden kunnen worden verhoogd door CSS-regels (om bij te houden hoe vaak ze worden gebruikt). Met tellers kunt u het uiterlijk van inhoud aanpassen op basis van de plaatsing in het document.
Automatische nummering met tellers
CSS-tellers zijn als "variabelen". De variabele waarden kunnen worden verhoogd door CSS-regels (die bijhouden hoe vaak ze worden gebruikt).
Om met CSS-tellers te werken, gebruiken we de volgende eigenschappen:
counter-reset- Creëert of reset een tellercounter-increment- Verhoogt een tellerwaardecontent- Voegt gegenereerde inhoud incounter()ofcounters()functie - Voegt de waarde van een teller toe aan een element
Om een CSS-teller te gebruiken, moet deze eerst worden gemaakt met counter-reset.
Het volgende voorbeeld maakt een teller voor de pagina (in de body-selector), verhoogt vervolgens de tellerwaarde voor elk <h2>-element en voegt "Sectie < waarde van de teller >:" toe aan het begin van elk <h2>-element:
Voorbeeld
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Tellers nesten
In het volgende voorbeeld wordt één teller gemaakt voor de pagina (sectie) en één teller voor elk <h1>-element (subsectie). De "sectie"-teller wordt geteld voor elk <h1>-element met "Sectie < waarde van de sectieteller >.", en de "subsectie"-teller wordt geteld voor elk <h2>-element met "< waarde van de sectieteller ". >.< waarde van de subsectieteller >":
Voorbeeld
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
Een teller kan ook handig zijn om overzichtslijsten te maken omdat er automatisch een nieuwe instantie van een teller wordt aangemaakt in onderliggende elementen. Hier gebruiken we de
counters()functie om een string in te voegen tussen verschillende niveaus van geneste tellers:
Voorbeeld
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Eigenschappen CSS-teller
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |