⌘K

Omadus counter-increment

Omadus counter-increment määrab elementide automaatse nummerdamise, näiteks lõikude või pealkirjade. Kasutatakse koos omadusega counter-reset, pseudoelementidega after ja before, omadusega content, mille sees kasutatakse funktsiooni counter. Parema mõistmise huvides soovitan vaadata näiteid.

Süntaks

cssvalija {
  counter-increment: nimi [samm] | none;
}

Väärtused

Väärtus Kirjeldus
nimi Loenduri nimi. Tavaline sõna (nagu klassi või id nimi). Saab määrata mitu nime, eraldades need tühikuga. Sel juhul muudetakse korraga mitut loendurit.
samm Täisarv positiivne või negatiivne. Valikuline parameeter.
none Keelab loenduri suurendamise praeguse valija jaoks.

Vaikeväärtus: none.

Näide

Teeme nii, et lõigud nummerdatakse automaatselt: 

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Näide

Olgu peale nummerdamise lisandub veel mingi tekst. Meie puhul № numbri ees ja punkt peale: 

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Näide

Alustame nummerdamist 10-st. Selleks paneme loenduri algväärtuseks üheksa, see tähendab 1 võrra vähem, kui meil vaja: 

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Näide

Olgu nüüd nummerdamine sammuga "2". Selleks paneme sammuks kahe: 

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* paneme kahe */
  content: "№" counter(test) ".";
}

Результат:

Näide

Eelmises näites algas nummerdamine kahest, aga me tahtsime ühest. Miks nii juhtus? Sellepärast, et counter-reset lähtestab loenduri väärtuse nulli, ja siis counter-increment lisab oma sammu: vaikimisi ühe, seepärast oli meil varem nummberdamine algusega 1-st. Aga nüüd lisandub kaks - ja nummerdamine algab kahest.

Probleemi parandamiseks paneme algse loenduri väärtuseks -1 ja nüüd algab nummerdamine 1-st ja suureneb 2 võrra: 

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Vaata ka

BackFunktsioon attrNextOmadus counter-reset