Ostatnio edytowany:

counter()

Autor: Virtual Patriot

Przeznaczenie funkcji counter()

Za pomocą funkcji counter() możemy odwołać się do wartości posiadanej przez interesujący nas licznik.

Parametry funkcji counter()

Przykładowe zapisy

counter(licznik)

counter(licznik-1)

counter(licznik-1, upper-roman)

name

Parametr name jest wymaganym parametrem funkcji counter(). Parametr name wskazuje na nazwę licznika, do którego wartości chcemy się odwołać.

Dostępne wartości

nazwa istniejącego licznika

Ważne

zostanie odszukana wartość pierwszego napotkanego licznika o podanej przez nazwie (odszukiwanie odbywa się poprzez kolejnych elementów przodków włączając w to również element HTML, do którego chcemy dodać wartość licznika)

Wartość domyślna

brak

type

Parametr type nie jest wymaganym parametrem funkcji counter(). Parametr type określa typ dla wartości posiadanej przez licznik.

Dostępne wartości

dowolna wartość właściwości list-style-type

Wartość domyślna

decimal

Właściwości CSS dla funkcji counter()

  1. content

Przykład funkcji counter()

  content:counter(licznik-1, upper-roman) ' - ';
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Do początkowej zawartości każdego z przykładowych elementów "div" został dodany dodatkowy pseudoelement "::before" wraz z dodatkową treścią w postaci wartości typu "upper-roman" posiadanej przez licznik o nazwie "licznik-1", ponieważ do wspomnianych elementów "div" (między innymi za pomocą selektora "::before") została dodana właściwość "content" wraz z kombinacją wartości zawierającą między innymi funkcję "counter()", w której to funkcji zostały użyte następujące wartości: "licznik-1, upper-roman".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      figure {
        counter-reset:licznik-1;
        margin:0;
        padding-left:1em;
        border-left:2px solid black;
        font-size:1.2em;
      }

      figure > div::before {
        content:counter(licznik-1, upper-roman) ' - ';
        counter-increment:licznik-1;
        color:blue;
      }
    </style>
  </head>

  <body>

    <figure>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>

Interpretacja funkcji counter()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak