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) ".";
}

Результат:

Տես նաև