თვისება 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,
რომელიც აბრუნებს თვლილის მნიშვნელობას ნულზე