Liczniki CSS

Pizza

Hamburger

Hotdogi

CSS liczniki są "zmiennymi" utrzymywanymi przez CSS, których wartość można zwiększać za pomocą reguł CSS (śledząc ich liczbę użyć).

Liczniki pozwalają dostosować wygląd na podstawie pozycji elementu w dokumencie.

Automatyczne numerowanie z licznikiem

CSS liczniki są jak "zmienne". Wartość zmiennej można zwiększać za pomocą reguł CSS (co śledzi ich liczbę użyć).

Aby użyć CSS liczników, użyjemy następujących atrybutów:

  • counter-reset - utwórz lub zresetuj licznik
  • counter-increment - zwiększ wartość licznika
  • content - wstaw generowaną treść
  • counter() lub counters() funkcji - dodaj wartość licznika do elementu

Aby użyć CSS liczników, musisz najpierw użyć counter-reset Stwórz to.

Poniższy przykład tworzy licznik dla strony (w selektorze body) oraz zwiększa wartość licznika dla każdego elementu <h2>, dodając na początku każdego <h2> "Sekcja <wartość licznika>:":

Przykład

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Sekcja " counter(section) ": ";
}

Spróbuj sam

Wcięte liczniki

Poniższy przykład tworzy licznik dla strony (section) oraz dla każdego elementu <h1> (subsection).

"section" licznik liczy dla każdego elementu <h1>, jednocześnie zapisując "Sekcja" oraz wartość licznika section, "subsection" licznik liczy dla każdego elementu <h2>, jednocześnie zapisując wartość licznika section oraz subsection:

Przykład

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Sekcja " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Spróbuj sam

Liczniki są również bardzo przydatne do tworzenia spisu treści, ponieważ automatycznie tworzą nową instancję licznika w podelementach. W tym przypadku używamy counters() Funkcja ta wstawia ciąg znaków między różnymi poziomami liczników:

Przykład

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Spróbuj sam

Atrybuty licznika CSS

Atrybut Opis
content Używaj z ::before i ::after pseudo-elementami, aby wstawić generowaną zawartość.
counter-increment Zwiększ wartość jednego lub więcej liczników.
counter-reset Utwórz lub zresetuj jednego lub więcej liczników.