Свойство counter-increment
Свойство counter-increment элементларни,
масалан, абзацлар ёки сарлавҳаларни автоматик
рақамлашни белгилайди. У counter-reset
свойствоси, after
ва before
сүдоэлементлари, content
свойствоси билан бирга ишлатилади, унинг ичида
counter функцияси қўлланилади.
Яхширок түшиниш учун мисолларни кўришни
тавсия қиламан.
Синтаксис
селектор {
counter-increment: ном [қадам] | none;
}
Қийматлар
| Қиймат | Изох |
|---|---|
| ном | Ҳисоблагыч номи. Оддий сўз (синф ёки id номи каби). Бир нечта ном белгилаб бериш мумкин, уларни бушлиқ билан ажратиб. Бу ҳолда бир нечта ҳисоблагыч бир вақтда ўзгариши мумкин. |
| қадам | Бутун мусбат ёки манфий сон. Мажбурий бўлмаган параметр. |
none |
Жорий селектор учун ҳисоблагычнинг ўсишини тўсadi. |
Стандарт қиймат: 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,
ҳисоблагыч қийматини нолга сетади