Protu resetiranje - CSS-trikovi

counter-resetSvojstvo omogućuje automatsko numeriranje elemenata. Poput uređenog popisa (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

counter-resetSvojstvo se koristi za vraćanje CSS brojač na dane vrijednosti.

Dio je CSS modula brojača koji je dio generiranog sadržaja, automatskog numeriranja i navodi CSS2.1 specifikaciju, proširenu u specifikaciji Generirani i zamijenjeni modul sadržaja CSS3.

Sintaksa

counter-reset: ( ?)+ | none

Gdje…

naziv je brojača koji želite resetirati
je vrijednost na koju treba resetirati brojač
none onemogućiti brojač

body ( counter-reset: my-awesome-counter 0; )

Napomena: zadana vrijednost za cijeli broj je 0. Ako nakon imena brojača nije postavljena niti jedna cjelobrojna vrijednost, vratit će se na 0. Dakle, ovo funkcionira prema očekivanjima:

body ( counter-reset: my-awesome-counter; )

Možete resetirati nekoliko brojača odjednom s razmakom odvojenim popisom, svaki sa svojom određenom vrijednošću ako želite.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

To će se vratiti my-awesome-counterna 5 i my-other-counterna zadanu vrijednost: 0.

Možete vidjeti ovaj popis kao: counter1 value1 counter2 value2 counter3 value3… . Ako je vrijednost izostavljena, to je 0.

Demo

U sljedećem pokaznom prikazu articleresetira se sectionbrojač prema zadanoj vrijednosti (0), koja se zatim povećava pri svakom pojavljivanju odjeljka, a zatim prikazuje ispred naslova odjeljaka.