Ostatnio edytowany:

counters()

Autor: Virtual Patriot

Przeznaczenie funkcji counters()

Za pomocą funkcji counters() możemy odwołać się 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ę liczników, do których 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 włączając w to również element HTML, do którego chcemy dodać finalną wartość)

finalna wartość będzie posiadała w sobie wartości wszystkich odszukanych liczników w kolejności od najpóźniej odszukanego do najwcześniej odszukanego

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 odszukane 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 posiadanych przez wszystkie odszukane liczniki.

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