Čítače CSS jsou "proměnné" spravované CSS, jejichž hodnoty lze zvyšovat pomocí pravidel CSS (aby bylo možné sledovat, kolikrát jsou použity). Čítače umožňují upravit vzhled obsahu na základě jeho umístění v dokumentu.
CSS čítače jsou jako "proměnné". Hodnoty proměnných lze zvýšit pomocí pravidel CSS (která budou sledovat, kolikrát jsou použita).
Pro práci s čítači CSS použijeme následující vlastnosti:
counter-reset- Vytvoří nebo vynuluje počítadlo
counter-increment- Zvyšuje hodnotu čítače
content- Vloží generovaný obsah
counter() or counters() function- Přidá hodnotu počítadla k prvku
Chcete-li použít počítadlo CSS, musí být nejprve vytvořeno pomocí resetování počítadla.
Následující příklad vytvoří počítadlo pro stránku (v selektoru těla), poté zvýší hodnotu čítače pro každý prvek <h2> a přidá "Sekce hodnota čítače:" na začátek každého prvku <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
Následující příklad vytvoří jeden čítač pro stránku (sekci) a jeden čítač pro každý prvek <h1> (podsekci). Počítadlo "sekce" se započítá pro každý prvek <h1> s "hodnotou počitadla sekcí." a počítadlo "podsekce" se započítá pro každý prvek <h2> s "<hodnota počítadla sekcí.hodnota počítadla podsekcí":
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
} Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
Počítadlo může být také užitečné pro vytváření nastíněných seznamů, protože je nové instance čítače se automaticky vytvoří v podřízených prvcích. Zde používáme Funkce counters() pro vložení řetězce mezi různé úrovně vnořených počítadla:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Používá se s pseudoprvky ::before a ::after k vložení generovaného obsahu
Zvyšuje jednu nebo více hodnot čítače
Vytvoří nebo vynuluje jeden nebo více čítačů
Vrátí aktuální hodnotu pojmenovaného čítače