Počítadla CSS
Pizza
Hamburger
Párky v rohlíku
Počítadla CSS jsou „proměnné“ spravované CSS, jejichž hodnoty lze zvyšovat pomocí pravidel CSS (pro sledování, kolikrát jsou použity). Čítače umožňují upravit vzhled obsahu na základě jeho umístění v dokumentu.
Automatické číslování s počítadly
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čítadlocounter-increment- Zvyšuje hodnotu čítačecontent- Vloží generovaný obsahcounter()nebocounters()funkce - Přidá k prvku hodnotu čítače
Chcete-li použít čítač CSS, musíte jej nejprve vytvořit pomocí counter-reset.
Následující příklad vytvoří počítadlo pro stránku (v selektoru těla), poté zvýší hodnotu počítadla pro každý prvek <h2> a na začátek každého prvku <h2> přidá „Sekce < hodnota počítadla >:“:
Příklad
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Počitadla hnízdění
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 "Sekce < hodnota počítadla sekcí >." a počítadlo "podsekce" se započítá pro každý prvek <h2> s "< hodnotou počítadla sekcí" >.< hodnota čítače podsekcí >":
Příklad
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) " ";
}
Čítač může být také užitečný pro vytváření přehledových seznamů, protože v podřízených prvcích se automaticky vytvoří nová instance čítače. Zde používáme
counters()funkci k vložení řetězce mezi různé úrovně vnořených čítačů:
Příklad
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Vlastnosti počítadla CSS
| Property | Description |
|---|---|
| content | Used with the ::before and ::after pseudo-elements, to insert generated content |
| counter-increment | Increments one or more counter values |
| counter-reset | Creates or resets one or more counters |
| counter() | Returns the current value of the named counter |