Vlastnost counter-increment

Vlastnost counter-increment nastavuje automatické číslování prvků, například odstavců nebo nadpisů. Používá se společně se vlastností counter-reset, pseudoprvky after a before, vlastností content, uvnitř které se používá funkce counter. Pro lepší pochopení doporučuji podívat se na příklady.

Syntaxe

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

Hodnoty

Výchozí hodnota: none.

Příklad

Nastavme automatické číslování odstavců:

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

Результат:

Příklad

Nechť kromě číslování přibude ještě nějaký text. V našem případě № před číslicí a tečka 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) ".";
}

Результат:

Příklad

Začněme číslování od 10-ti. K tomu nastavíme počáteční hodnotu čítače na devět, tedy o 1 méně, než potřebujeme:

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

Результат:

Příklad

Nechť je nyní číslování s krokem "2". K tomu jako 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) ".";
}

Результат:

Příklad

V předchozím příkladu číslování začalo dvojkou, ale my bychom chtěli od jedničky. Proč k tomu došlo? Protože counter-reset resetuje hodnoty čítače na nulu a poté counter-increment přidá svůj krok: ve výchozím nastavení jedničku, proto dříve u nás číslování začínalo od 1. A nyní přibývá dvojka - a číslování začíná dvojkou.

K opravení problému nastavme počáteční hodnotu čítače na -1 a nyní číslování začne od 1 a bude se zvyšovat 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) ".";
}

Результат:

Viz také