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 касиети,
ал эсептегичтин маанисин нөлгө коёт