counter-reset - Český CSS 3 manuál

Naučíme tě pracovat na home-office.

Zjistit více...

Pomocí CSS 3 vlastnosti counter-reset definujeme ID počítadla a zároveň ho resetujeme. Vlastnost se dědí.

Hodnoty

none (výchozí) - Žádné počítadlo se neresetuje.
id číslo - ID představuje jméno počítadla a číslo hodnotu, na kterou se počítadlo resetuje (výchozí hodnota je 0).
initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
inherit - Hodnota se zdědí z rodičovského elementu.

Pro přičítání můžeme použít vlastnost counter-increment a pro vypsání čísla atribut content.

Ukázka

Pro ukázku si vytvořme počítadlo s názvem pocitani. To budeme zvyšovat o jednu hodnotu a budeme ho používat u nadpisu 2. úrovně. K tomu nastavíme elementu p (odstavec) zresetování výše zmíněného počítadla. Tato vlastnost je nastavena i v elementu body kvůli definování počítadla.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                body, p
                {
                        counter-reset: pocitani;
                }
                h2:before
                {
                        counter-increment: pocitani;
                        content: counter(pocitani) ". ";
                }
                </style>
                <title>counter-reset</title>
        </head>
        <body>
                <h2>Položka</h2>
                <h2>Položka před zresetováním</h2>
                <p>Počítadlo zresetováno!</p>
                <h2>Položka po zresetování</h2>
                <h2>Položka</h2>
        </body>
</html>

Výsledek:

Vlastnost counter-reset v CSS 3 - Text a písmo - CSS vlastnosti

Článek pro vás napsal Jan Lupčík

Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.

Aktivity