CSS counter() functie
- Vorige pagina CSS cos() functie
- Volgende pagina CSS counters() functie
- Terug naar het vorige niveau CSS Function Reference Manual
Definitie en gebruik
counter()
De functie retourneert de huidige waarde van de specifieke teller als string.
Voorbeeld
Voorbeeld 1
Maak een teller voor de pagina aan (in de selector body). Voeg de waarde van de teller toe aan elke <h2> element en voeg voor elke <h2> element de tekst 'Hoofdstuk X' toe:
body { counter-reset: section; } h2::before { counter-increment: section; content: "Sectie " counter(section) ": "; }
Voorbeeld 2
Stel de stijl van de teller in:
body { counter-reset: section; } h2::before { counter-increment: section; content: "Sectie " counter(section, upper-roman) ": "; }
CSS syntaxis
counter(countername, counterstyle)
Waarde | Beschrijving |
---|---|
countername |
Verplicht. Naam van de teller (dezelfde naam als in de properties counter-reset en counter-increment). Let op, namen zijn hoofdlettergevoelig. |
counterstyle |
Optioneel. Stijl van teller (kan een waarde van list-style-type, een naam van @counter-style of de functie symbols() zijn). Standaardwaarde is decimaal. |
Technische details
Versie: | CSS3 |
---|
Browser ondersteuning
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning | Ondersteuning |
Gerelateerde pagina's
Tutorial:CSS teller
Referentie:CSS content eigenschap
Referentie:CSS teller-verhoog eigenschap
Referentie:CSS teller-herstel eigenschap
Referentie:CSS @counter-style regel
Referentie:CSS counters() functie
- Vorige pagina CSS cos() functie
- Volgende pagina CSS counters() functie
- Terug naar het vorige niveau CSS Function Reference Manual