Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

counter-increment

counter-increment-ominaisuudella muutetaan (tyypillisesti kasvatetaan) laskurin arvoa:

DOM-viittaus: olio.style.counterIncrement

Esimerkki

Esimerkin vuoksi tämän sivun otsikot (h1- ja kolme h2-elementtiä) on alustettu laskureiksi ja laskureiden arvot on pyydetty esiin seuraavilla tyylisäännöillä:

/*Esimerkillä numeroidaan otsikkotasot siten että h1
  on pääotsikko (1), h2 on aliotsikko (1.1), jne.*/

/*Luodaan laskurin soveltamisalueeksi koko sivu,
  joten alustetaan pääotsikot body-elementistä:*/
body {
counter-reset:otsikko1;
/*Tässä luotiin laskuri nimeltä "otsikko1",
  joka sai oletusarvon 0.*/
}
/*Luodaan näennäiselementti ennen pääotsikoita:*/
h1:before {
/*Kasvatetaan otsikko1-laskuria oletusarvolla 1:*/
counter-increment:otsikko1;
/*Pyydetään näennäiselementin sisällöksi otsikko1-laskurin
arvo ja välilyönti:*/
content:counter(otsikko1) " ";
}
/*Luodaan otsikko2-laskuri ja alustetaan se
  oletusarvolla 0 jokaisen pääotsikon kohdalla:*/
h1 {
counter-reset:otsikko2;
}
/*Luodaan näennäiselementti ennen 2. tason otsikoita:*/
h2:before {
/*Kasvatetaan otsikko2-laskuria oletusarvolla 1:*/
counter-increment:otsikko2;
/*Pyydetään näennäiselementin sisällöksi otsikko1-laskurin
arvo, piste, otsikko2-laskurin arvo ja välilyönti:*/
content:counter(otsikko1) "." counter(otsikko2) " ";
}
/*Esimerkin vuoksi vielä näennäiselementille
  eri tyylejä kuin otsikoille:*/
h1:before,
h2:before {
color:red;
font-family:monospace;
}

Huomiot

Lisätietoja englanniksi

CSS 2.1 -ominaisuusreferenssi | CSS 2.1 -sekalaiset ominaisuudet