თვისება counter-increment

თვისება counter-increment აძლევს ელემენტების ავტომატურ ნუმერაციას, მაგალითად, აბზაცების ან სათაურების. გამოიყენება ერთად თვისებასთან counter-reset, ფსევდოელემენტებთან after და before, თვისებასთან content, რომლის შიგნითაც გამოიყენება ფუნქცია counter. უკეთესი გაგებისთვის გირჩევთ ნახოთ მაგალითები.

სინტაქსი

cssსელექტორი {
  counter-increment: სახელი [ნაბიჯი] | none;
}

მნიშვნელობები

მნიშვნელობა ნაგულისხმევად: none.

მაგალითი

გავაკეთოთ ისე, რომ აბზაცებმა მიიღონ ავტომატური ნუმერაცია:

html<div id="parent">
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
</div>

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

Результат:

მაგალითი

დავუმატოთ ნუმერაციას რაიმე ტექსტი. ჩვენს შემთხვევაში № ციფრამდე და მძიმით შემდეგ:

html<div id="parent">
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
</div>

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

Результат:

მაგალითი

დავიწყოთ ნუმერაცია 10-დან. ამისთვის თვლილის საწყის მნიშვნელობად დავსვათ ცხრა, ანუ 1-ით ნაკლები, ვიდრე გვსურს:

html<div id="parent">
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
</div>

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

Результат:

მაგალითი

ახლა ნუმერაცია იყოს ნაბიჯით "2". ამისთვის ნაბიჯად დავსვათ ორი:

html<div id="parent">
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* ვსვამთ ორს */
  content: "№" counter(test) ".";
}

Результат:

მაგალითი

წინა მაგალითში ნუმერაცია დაიწყო ორიდან, ჩვენ კი გვსურდა ერთიდან. რატომ მოხდა ასე? იმიტომ, რომ counter-reset აბრუნებს თვლილის მნიშვნელობას ნულზე, შემდეგ კი counter-increment ამატებს თავის ნაბიჯს: ნაგულისხმევად ერთი, ამიტომ აქამდე ჩვენ ნუმერაცია იწყებოდა 1-დან. ახლა კი ეკრიფება ორი - და ნუმერაცია იწყება ორიდან.

პრობლემის გადასაჭრელად დავსვათ საწყისი მნიშვნელობა თვლილის -1-ზე და ახლა ნუმერაცია დაიწყება 1-დან და გაიზრდება 2-ით:

html<div id="parent">
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
  <p>ტექსტი</p>
</div>

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

Результат:

იხილეთ აგრეთვე