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

Pomocí CSS 3 vlastnosti counter-increment můžeme přičítat k číslu vlastní hodnotu a tak tvořit seznamy. Vlastnost se dědí.

Hodnoty

none (výchozí) - Nic se nepočítá.
id číslo - ID představuje jméno počítadla a číslo hodnotu, o kterou se bude zvětšovat (výchozí hodnota je 1). ID musí být definované atributem counter-reset, aby se nastavilo na hodnotu 0 a my mohli přičítat.
initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
inherit - Hodnota se zdědí z rodičovského elementu.

Pro vypsání musíme použít atribut content.

Ukázka

Vytvoříme si seznam pomocí nadpisů. Nadpisy nejvyšší úrovně budou mít počítadlo pod názvem kategorie a počítadlo druhé úrovně se bude jmenovat podkategorie. Toto počítadlo budeme po vypsání všech nadpisů druhé úrovně resetovat.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                body
                {
                        counter-reset: kategorie;
                }
                h1
                {
                        counter-reset: podkategorie;
                }
                h1:before
                {
                        counter-increment: nadpis;
                        content: "Sekce " counter(kategorie) ". ";
                }
                h2:before
                {
                        counter-increment: podnadpis;
                        content: counter(kategorie) "." counter(podkategorie) ". ";
                }
                </style>
                <title>counter-increment</title>
        </head>
        <body>
                <h1>Programovací jazyky</h1>
                <h2>PHP</h2>
                <h2>JavaScript</h2>
                <h2>C#</h2>
                <h1>Operační systémy</h1>
                <h2>Windows</h2>
                <h2>Mac</h2>
                <h2>Linux</h2>
        </body>
</html>

Výsledek:

Vlastnost counter-increment 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