Counter-increment

CSS vlastnost counter-increment se hodí na číslování nadpisů, číslování obrázků nebo číslování jiných věcí rozprostřených po celé stránce. Na rozdíl od běžného číselného seznamu (tag <ol>, tj. ordered list) nemusí být číslované položky bezprostředně za sebou.

counter-increment

hodnoty	význam
název_počitadla	nastavuje se k prvkům, které patří k sobě, aby se daly číslovat
název_počitadla číslo	totéž, ale počitadlo se změní o číslo, například o 2. Nenapadá mě moc použití.
none	prvek bude bez čísla

Aby se číslování nějak projevilo, je potřeba prvkům (odstavcům, popisům obrázků apod.):

• buďto nastavit vlastnosti list-style-type: decimal; display: list-item;
• nebo využít vlastnost content a pomocí selektoru :before před prvek číslování napsat.

Příklad s využitím list-style-type a display: list-item

<style>
h4 {display: list-item; list-style-type: decimal; counter-increment: hactyrky;}
</style>
<h4>První há čtyřka</h4>
<p>Cokoli mezi tím</p>
<h4>Druhá há čtyřka</h4>
<h4>Třetí há čtyřka</h4>

se zobrazí takto:

První há čtyřka

Cokoli mezi tím

Druhá há čtyřka

Třetí há čtyřka

Jak vidíte, název počitadla hactyrky jsem zvolil zcela libovolně (a schválně česky, abyste pochopili, že je libovolný). Pokud bych něčemu dalšímu dal stejný název do counter-increment, zařadil by se takový prvek do číselné řady.

Jiný příklad, tentokrát s použitím content a before.

<style>
h2:before { content: counter(hadvojka) ") ";}
h2 {counter-increment: hadvojka;}
</style>

<h2>první nadpis h2</h2>
<p>text odstavce</p>
<h2>druhý nadpis h2</h2>
<p>text druhého odstavce</p>
<h2>třetí nadpis h2</h2>

Tento příklad na counter() a counter-increment je lepší si zobrazit v prohlížeči, aby mi to tady nerozbil. Důležitý je tam ten řádek s h2:before. Říká, že před každou h2 se přidá obsah (vlastnost content), který obsahuje hodnotu počitadla hadvojka a za něj ještě přidá závorku. Zápis za content může být i složitější a obsahovat i více počitadel.

Kdybych chtěl v zápisu counter() použít římské číslování namísto desetinného, napíšu counter(hadvojka, upper-roman). Pokud si s tím chcete hrát víc, existuje dokonce @ pravidlo @counter-style, v němž si můžete definovat vlastní styly číslování.

Counter-reset

Další CSS vlastnost úzce navázaná na counter-increment. Co to umí:

• buďto uvedené počitadlo vynulovat, takže další číslování pojede zase od jedničky

• nebo nastavit počitadlo na uvedenou hodnotu

counter-reset

hodnoty	význam
název_počitadla	vynuluje počitadlo, takže další prvek s nastaveným counter-increment na název_počitadla začne od jedničky
název_počitadla hodnota	nastaví počitadlo na uvedenou hodnotu

Při testování (2020) jsem narazil na nějaké bugy ve Firefoxu, takže doporučuji counter-reset používat opatrně.

Použití mě napadlo například při víceúrovňovém číslování. Například chci v nové kapitole znovu číslovat nadpisy.

Podpora

Podpora vlastnosti counter-increment

Prohlížeč	Podpora
Internet Explorer	ano
Firefox	ano
Opera	ano
Chrome	ano

Příklady

Pokus s counter-increment

Příklad na counter-increment a counter-reset

 

 

Vizte též

List-style-type

Display

Content