Lastnost counter-increment

Lastnost counter-increment določa samodejno številčenje elementov, na primer, odstavkov ali naslovov. Uporablja se skupaj z lastnostjo counter-reset, psevdoelementoma after in before, lastnostjo content, znotraj katere se uporablja funkcija counter. Za boljše razumevanje priporočam, da si ogledate primere.

Sintaksa

cssselektor {
  counter-increment: ime [korak] | none;
}

Vrednosti

Privzeta vrednost: none.

Primer

Naredimo, da se odstavki samodejno oštevilčijo:

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);
}

Результат:

Primer

Naj poleg številčenja doda še kakšno besedilo. V našem primeru № pred številko in pika za:

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) ".";
}

Результат:

Primer

Začnimo številčenje z 10. Za to postavimo začetno vrednost števca na devet, to je za 1 manj, kot potrebujemo:

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) ".";
}

Результат:

Primer

Naj bo zdaj številčenje s korakom "2". Za to kot korak postavimo dvojko:

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; /* postavimo dvojko */
  content: "№" counter(test) ".";
}

Результат:

Primer

V prejšnjem primeru se je številčenje začelo z dvojko, mi pa bi radi z enico. Zakaj se je to zgodilo? Ker counter-reset ponastavi vrednosti števca na nič, nato pa counter-increment doda svoj korak: privzeto enico, zato se je pri nas prej številčenje začelo z 1. Zdaj pa se prišteva dvojka - in številčenje se začne z dvojko.

Za odpravljanje težave postavimo začetno vrednost števca na -1 in zdaj se bo številčenje začelo z 1 in povečevalo za 2:

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) ".";
}

Результат:

Glejte tudi