ChillCode
CSS
  1. Wprowadzenie do CSS
  2. Szybki start
  3. Selektory
  4. Komentarze
  5. Kolory
  6. Tło
  7. Wysokość | Szerokość
  8. Pozycja
  9. Przepełnienie
  10. Marginesy
  11. Dopełnienie
  12. Obramowanie
  13. Zarys
  14. Tekst
  15. Czcionki
  16. Wyświetlanie Elementów
  17. Obrazy
  18. Tabele
  19. Listy
  20. Z-index
  21. Właściwość float
  22. Kombinatory
  23. Pseudo Klasy
  24. Pseudo Elementy
  25. Pasek Nawigacyjny
  26. Przezroczystość
  27. Formularze
  28. Liczniki
  29. Funkcje Matematyczne
  30. Selektory Atrybutów
  31. Podsumowanie
Strona główna
Blog
O nas
Centrum pomocy
Wsparcie
  1. Wprowadzenie do CSS
  2. Szybki start
  3. Selektory
  4. Komentarze
  5. Kolory
  6. Tło
  7. Wysokość | Szerokość
  8. Pozycja
  9. Przepełnienie
  10. Marginesy
  11. Dopełnienie
  12. Obramowanie
  13. Zarys
  14. Tekst
  15. Czcionki
  16. Wyświetlanie Elementów
  17. Obrazy
  18. Tabele
  19. Listy
  20. Z-index
  21. Właściwość float
  22. Kombinatory
  23. Pseudo Klasy
  24. Pseudo Elementy
  25. Pasek Nawigacyjny
  26. Przezroczystość
  27. Formularze
  28. Liczniki
  29. Funkcje Matematyczne
  30. Selektory Atrybutów
  31. Podsumowanie

Liczniki

Counter to jedna z funkcjonalności CSS, która pozwala na tworzenie liczników, tj. numerowania elementów listy lub innych elementów na stronie. Aby utworzyć licznik w CSS, należy użyć deklaracji counter-reset i counter-increment na elemencie nadrzędnym, a następnie wykorzystać wartość tego licznika w elemencie podrzędnym za pomocą funkcji counter().

Następujące właściwości będą używane do interakcji z licznikami CSS:

  • counter() - Funkcja CSS, która pozwala na odczytanie wartości licznika.
  • counter-reset - Służy do tworzenia licznika i ustawiania jego wartości początkowej.
  • counter-increment - Służy do zwiększania wartości licznika.
  • content - Służy do wstawiania wartości licznika w treść elementu.

Licznik tworzący numeracjie punktów w liście

										
ol {
  counter-reset: li;
}

li {
  list-style: none;
  counter-increment: li;
  position: relative;
  margin-bottom: 10px;
  padding-left: 25px;
}

li:before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  top: 0;
}
  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt
  4. Czwarty punkt
Wyjaśnienie

W tym przykładzie, counter-reset: li resetuje licznik "li" do zera na elemencie ol, a counter-increment: li zwiększa wartość licznika "li" o 1 dla każdego elementu li w sekcji. Następnie, wartość licznika jest wyświetlana przed każdym elementem li za pomocą funkcji counter(li). W rezultacie każdy punkt listy będzie miał przed sobą numerację (np. "1.", "2.", "3.", "4."), bez wyświetlania standardowego symbolu punktora (np. "•"). Wartość licznika jest wyświetlana przed każdym elementem listy dzięki regule li:before.