49 Loendur ehk automaatne nummerdamine
Sarnaselt tekstitöötlusest tuntud automaatsetele nummerdamisvõimalustele (peatükid, joonised jms) saab nummerdada ka veebilehe elemente. Selleks saab kasutada omadust counter, mis põhimõtteliselt on nagu css-muutuja.
Iga loenduri ehk counter’i kasutamisel tuleb määrata, millisest veebilehe osast loenduri väärtus lähtestatakse (millise elemendi puhul algab numeratsioon uuesti algusest), millise elemendi juures loenduri väärtust suurendatakse ning lõpuks ka millise elemendi juures loenduri väärtust näidatakse.
Loenduri lähtestab omadus counter-reset, mille väärtusena pannakse kirja lähtestatava loenduri nimi ja vajadusel ka kasutatav algväärtus.
Näiteks lähtestame loenduri „pealkirjad“ elemendi <body> stiilis – numeratsioon on ühtne terve veebilehe jooksul:
body {
counter-reset: pealkirjad;
}
Kui on vaja alustada kindla väärtusega, siis tuleb lisada soovitud väärtus (vaikeväärtus on 0, mis tähendab, et esimene näidatav väärtus on 1).
Näiteks lähtestame loenduri „joonised“ väärtusele 3:
body {
counter-reset:pealkirjad 3;
}
Loenduri väärtuse suurendamiseks kasutatakse omadust counter-increment.
Näiteks suurendame loenduri „pealkirjad“ väärtust iga kord kui esineb element <h2>:
figcaption {
counter-increment:joonised;
}
Vaikimisi suurendatakse loendurit alati 1 võrra. Kasutada tohib ka negatiivseid väärtuseid ning isegi 0-i. Näiteks suurendame loendurit „joonised“ kahe võrra:
figcaption {
counter-increment:joonised 2;
}
Loenduri lisamiseks kasutatakse pseudoklasse ::before ja ::after, kus loenduri nimi lisatakse content ühe väärtusena.
Näiteks lisame numbrid ja sildi „Joonis“ kõigile piltidele, mis on elemendi <figure> tütarelementideks:
h2::before {
content: 'Peatükk' counter(pealkirjad) ': ';
}
Kogu näide:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: my-sec-counter 3;
}
h2::before {
counter-increment: my-sec-counter;
content: "Peatükk " counter(my-sec-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
</body>
</html>
