Liczniki CSS
Pizza
Hamburger
Hot dogi
Liczniki CSS to „zmienne” utrzymywane przez CSS, których wartości mogą być zwiększane przez reguły CSS (aby śledzić, ile razy są używane). Liczniki pozwalają dostosować wygląd zawartości na podstawie jej umieszczenia w dokumencie.
Automatyczne numerowanie z licznikami
Liczniki CSS są jak „zmienne”. Wartości zmiennych mogą być zwiększane przez reguły CSS (które śledzą, ile razy są używane).
Do pracy z licznikami CSS użyjemy następujących właściwości:
counter-reset- Tworzy lub resetuje licznikcounter-increment- Zwiększa wartość licznikacontent- Wstawia wygenerowaną treśćcounter()lubcounters()funkcja - Dodaje wartość licznika do elementu
Aby użyć licznika CSS, należy go najpierw utworzyć za pomocą counter-reset.
Poniższy przykład tworzy licznik dla strony (w selektorze treści), a następnie zwiększa wartość licznika dla każdego elementu <h2> i dodaje „Sekcja < wartość licznika >:” na początku każdego elementu <h2>:
Przykład
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Liczniki zagnieżdżania
Poniższy przykład tworzy jeden licznik dla strony (sekcji) i jeden licznik dla każdego elementu <h1> (podsekcji). Licznik "sekcji" będzie liczony dla każdego elementu <h1> o "Przekrój < wartość licznika sekcji >.", a licznik "podsekcji" będzie liczony dla każdego elementu <h2> o "< wartości licznika sekcji >.< wartość licznika podsekcji >:
Przykład
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) " ";
}
Licznik może być również przydatny do tworzenia list w zarysie, ponieważ nowe wystąpienie licznika jest automatycznie tworzone w elementach podrzędnych. Tutaj używamy
counters()funkcji, aby wstawić ciąg między różnymi poziomami zagnieżdżonych liczników:
Przykład
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Właściwości licznika 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 |