Veturia counter-increment

Veturia counter-increment vendos numërimin automatik të elementeve, për shembull, paragrafëve ose titujve. Përdoret së bashku me veturinë counter-reset, pseudoelementet after dhe before, veturinë content, brenda së cilës përdoret funksioni counter. Për një kuptim më të mirë ju rekomandoj të shikoni shembujt.

Sintaksa

selektori {
	counter-increment: emri [hapi] | none;
}

Vlerat

Vlera	Përshkrimi
emri	Emri i numëruesit. Fjalë e zakonshme (si emri i klasës ose id). Mund të vendosni disa emra, duke i ndarë me hapësirë. Në këtë rast njëkohësisht do të ndryshojnë disa numërues.
hapi	Numër i plotë pozitiv ose negativ. Parametër jo i detyrueshëm.
`none`	Ndalon rritjen e numëruesit për selektorin aktual.

Vlera e paracaktuar: none.

Shembull

Le t'i bëjmë paragrafët të numërohen automatikisht:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

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

Shembull

Lejo që përveç numërimit të shtohet edhe ndonjë tekst. Në rastin tonë № përpara numrit dhe pikë pas:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

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

Shembull

Le të fillojë numërimi nga 10-shi. Për këtë vlerën fillestare të numëruesit e vendosim në nëntë, domethënë 1 më pak se sa na duhet:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

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

Shembull

Le të jetë numërimi tani me hap "2". Për këtë si hap vendosim dy:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* vendosim dy */
	content: "№" counter(test) ".";
}

Shembull

Në shembullin e mëparshëm numërimi filloi nga dy, por ne dëshironim nga një. Pse ndodhi kështu? Sepse counter-reset e rivendos vlerën e numëruesit në zero, e pastaj counter-increment i shton hapin e vet: si parazgjedhje një, prandaj më parë tek ne numërimi fillonte nga 1. Tani i shtohet dy - dhe numërimi fillon nga dy.

Për të rregulluar problemin le të vendosim vlerën fillestare të numëruesit në -1 dhe tani numërimi do të fillojë nga 1 dhe do të rritet me 2:

<div id="parent">
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
</div>

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

Shihni gjithashtu

veturia counter-reset,
e cila e rivendos vlerën e numëruesit në zero