Vlastnosť counter-increment

Vlastnosť counter-increment nastavuje automatické číslovanie prvkov, napríklad odsekov alebo nadpisov. Používa sa spoločne s vlastnosťou counter-reset, pseudoelementmi after a before, vlastnosťou content, v ktorom sa používa funkcia counter. Pre lepšie pochopenie odporúčam pozrieť si príklady.

Syntax

cssselektor {
  counter-increment: názov [krok] | none;
}

Hodnoty

Predvolená hodnota: none.

Príklad

Nastavme automatické číslovanie odsekov:

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

Результат:

Príklad

Nech okrem číslovania sa pridá aj nejaký text. V našom prípade № pred číslom a bodka 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) ".";
}

Результат:

Príklad

Začnime číslovanie od 10. Na to nastavíme počiatočnú hodnotu počítadla na deväť, teda o 1 menej, ako potrebujeme:

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

Результат:

Príklad

Nech je teraz číslovanie s krokom "2". Na to ako krok nastavíme dvojku:

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; /* nastavíme dvojku */
  content: "№" counter(test) ".";
}

Результат:

Príklad

V predchádzajúcom príklade číslovanie začalo dvojkou, ale my by sme chceli od jednotky. Prečo sa to stalo? Pretože counter-reset resetuje hodnotu počítadla na nulu a potom counter-increment pridá svoj krok: predvolene jednotku, preto predtým u nás číslovanie začínalo od 1. A teraz pripočítava sa dvojka - a číslovanie začína dvojkou.

Pre opravu problému nastavme počiatočnú hodnotu počítadla na -1 a teraz číslovanie začne od 1 a bude sa zvyšovať o 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) ".";
}

Результат:

Pozri tiež