Уласцівасць counter-increment

Уласцівасць counter-increment задае аўтаматычную нумарацыю элементаў, напрыклад, абзацаў ці загалоўкаў. Выкарыстоўваецца сумесна з уласцівасцю counter-reset, псеўдаэлементамі after і before, уласцівасцю content, усярэдзіне якой выкарыстоўваецца функцыя counter. Для лепшага разумення рэкамендую паглядзець прыклады.

Сінтаксіс

cssселектар {
  counter-increment: назва [крок] | none;
}

Значэнні

Значэнне па змаўчанні: none.

Прыклад

Зробім так, каб абзацы нумараваліся аўтаматычна:

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

Результат:

Прыклад

Хай акрамя нумарацыі дадаецца яшчэ які-небудзь тэкст. У нашым выпадку № перад лічбай і кропка пасля:

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

Результат:

Прыклад

Пачнем нумарацыю з 10-ці. Для гэтага пачатковым значэннем лічыльніка ставім дзевяць, гэта значыць на 1 менш, чым нам трэба:

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

Результат:

Прыклад

Хай цяпер нумарацыя будзе з крокам "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;
}
#parent p::before {
  counter-increment: test 2; /* ставім двойку */
  content: "№" counter(test) ".";
}

Результат:

Прыклад

У папярэднім прыкладзе нумарацыя пачалася з двойкі, а мы хацелі б з адзінкі. Чаму так адбылося? Таму што counter-reset скідвае значэнні лічыльніка ў нуль, а затым counter-increment дадае свой крок: па змаўчанні адзінку, таму раней у нас нумарацыя пачыналася з 1. А цяпер дадаецца двойка - і нумарацыя пачынаецца з двойкі.

Для выпраўлення праблемы паставім пачатковае значэнне лічыльніка ў -1 і цяпер нумарацыя пачнецца з 1 і будзе павялічвацца на 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) ".";
}

Результат:

Глядзіце таксама