Ostatnio edytowany:

counters()

Autor: Virtual Patriot

Przeznaczenie funkcji counters()

Za pomocą funkcji counters() możemy odwołać się do wartości posiadanej przez interesujący nas licznik lub do wartości posiadanych przez interesujące nas liczniki o tej samej nazwie.

Parametry funkcji counters()

Przykładowe zapisy

counter(licznik, '.')

counter(licznik-1, ' - ')

counter(licznik-1, ' - ', upper-roman)

name

Parametr name jest wymaganym parametrem funkcji counters(). 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ść każdego napotkanego licznika o podanej przez nazwie (odszukiwanie odbywa się poprzez kolejnych elementów przodków (od elementu HTML, do którego chcemy dodać wartość licznika o podanej przez nas nazwie (włączając w to również ten element HTML)))

Wartość domyślna

brak

separator

Parametr separator jest wymaganym parametrem funkcji counters(). Parametr separator określa dodatkowy ciąg znaków, który powinien pełnić rolę separatora wartości posiadanych przez kolejne ewentualne liczniki.

Dostępne wartości

dowolny ciąg znaków

Wartość domyślna

brak

type

Parametr type nie jest wymaganym parametrem funkcji counters(). 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 counters()

  1. content

Przykład funkcji counters()

  content:counters(licznik-1, '.') ' - ';
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
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 posiadanych przez wszystkie dostępne dla poszczególnych przykładowych elementów "div" liczniki o nazwie "licznik-1" (ponadto gdy jest to konieczne wartości posiadane przez kolejne liczniki o nazwie "licznik-1" zostały od siebie odseparowane znakiem "."), 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ę "counters()", w której to funkcji zostały użyte następujące wartości: " licznik-1, '.' ".

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;
      }

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

      #struktura figure {
        counter-reset:licznik-1;
        margin:0;
        padding-left:2em;
      }

      #struktura div::before {
        content:counters(licznik-1, '.') ' - ';
        counter-increment:licznik-1;
        color:blue;
      }
    </style>
  </head>

  <body>

    <figure id="struktura">
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"
        <figure>
          <div>przykładowy element "div"</div>
          <div>przykładowy element "div"</div>
          <div>przykładowy element "div"</div>
        </figure>
      </div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
      <div>przykładowy element "div"</div>
    </figure>

  </body>
</html>

Interpretacja funkcji counters()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak