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.
| 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
| 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
| Prohlížeč | Podpora |
|---|---|
| Internet Explorer | ano |
| Firefox | ano |
| Opera | ano |
| Chrome | ano |
Příklady
Příklad na counter-increment a counter-reset
Reklama
