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 հատկությունը,
որը վերակայում է հաշվիչի արժեքը զրոյի