Autor publikacji: Virtual Patriot - Administrator

counters()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - the counters function (LV3)

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()`

            name, separator, type

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.

type

Parametr type nie jest wymaganym parametrem funkcji counters(). Parametr type określa typ dla wartości posiadanych przez wszystkie odszukane liczniki.

Występowanie funkcji `counters()`

content #counters()

Przykład funkcji `counters()`

  content:counters(licznik-1, '.') ' - ';

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()`

: tak
: tak
: tak
: tak
: tak
: tak