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 қасиеті,
ол есептегіштің мәнін нөлге қайтарады