Хусусияти counter-increment

Хусусияти counter-increment нумаракунии худкори унсурҳоро, масалан, абзасҳо ё сарлавҳаҳоро таъин мекунад. Ҳамроҳ бо хусусияти counter-reset, судуэлементҳои after ва before, хусусияти content корбаст мешавад, ки дар он функсияи counter истифода мешавад. Барои фаҳмиши беҳтар тавсия медиҳам, ки намунаҳоро бубинед.

Синтаксис

интихобкунанда {
	counter-increment: ном [қадам] | none;
}

Қимматҳо

Қиммат	Тавсиф
ном	Номи счётчик. Калимаи оддӣ (монанди номи синф ё id). Метавонад якчанд номро бо фосила ҷуда карда таъин кард. Дар ин ҳол як вақт якчанд счётчик тағйир меёбанд.
қадам	Адади бутун мусбӣ ё манфӣ. Параметри ихтиёрӣ.
`none`	Барои интихобкунандаи ҷорӣ афзоиши счётчикро манъ мекунад.

Қиммати пешфарз: none.

Намуна

Биёед то абзасҳо худкор нумара шаванд:

<div id="parent">
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Намуна

Бигзор ғайр аз нумаракунӣ ягон матни дигар низ илова шавад. Дар мисоли мо № пеш аз рақам ва нуқта баъд аз он:

<div id="parent">
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Намуна

Нумаракуниро аз 10 оғоз кунем. Барои ин қиммати ибтидоии счётчик нӯҳ мегузорем, яъне ба 1 камтар аз он чи ки мо лозим дорем:

<div id="parent">
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Намуна

Бигзор нумаракунӣ бо қадами "2" бошад. Барои ин ҳамчун қадам дутарро мегузорем:

<div id="parent">
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* дутарро мегузорем */
	content: "№" counter(test) ".";
}

Намуна

Дар мисоли гузашта нумаракунӣ аз дутар оғоз шуд, вале мо мехостем аз якум. Чаро ин рӯй дод? Зеро counter-reset қимматҳои счётчикро ба сифр бармегардонад, ва сипас counter-increment қадами худро меафзояд: пешфарз якум, аз ин рӯ пештар нумаракунии мо аз 1 оғоз мешуд. Ва акнун дутар афзоиш меёбад - ва нумаракунӣ аз дутар оғоз мешавад.

Барои ислоҳи мушкилот қиммати ибтидоии счётчикро ба -1 мегузорем ва акнун нумаракунӣ аз 1 оғоз мешавад ва бо 2 зиёд мешавад:

<div id="parent">
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
	<p>матн</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Ҳамчунин нигаред

хусусияти counter-reset,
ки қиммати счётчикро ба сифр бармегардонад