Ostatnio edytowany:

counter-increment

Autor: Virtual Patriot

Opis właściwości counter-increment

Za pomocą właściwości counter-increment możemy określić w jaki sposób interesujący nas element HTML powinien mieć wpływ na wartość posiadaną przez wskazany przez nas licznik.

Dodatkowe techniczne informacje o właściwości counter-increment

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości counter-increment

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości counter-increment

none

Opis

Wartość none jest domyślną wartością właściwości counter-increment.

Domyślnie żaden element HTML nie ma wpływu na wartość posiadaną przez jakikolwiek licznik.

Przykład

  counter-increment:none;
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Żaden z przykładowych elementów HTML nie ma wpływu na wartość posiadaną przez licznik o nazwie "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;
      }

      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) ' - ';
        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>

wzorzec wartości

Opis

Za pomocą właściwości counter-increment oraz z góry zdefiniowanego wzorca wartości możemy określić w jaki sposób interesujący nas element HTML powinien mieć wpływ na wartość posiadaną przez wskazany przez nas licznik.

Składniki wzorca wartości właściwości counter-increment

Ważne

możemy podać więcej par składników name change, dzięki czemu interesujący nas element HTML może mieć wpływ na wartości posiadane przez większą liczbę liczników (składnik change nie jest składnikiem wymaganym)

Przykładowe zapisy

licznik-1

licznik-1 4

licznik-1 -2

licznik-1 4 licznik-2 -2

licznik-1 licznik-2

licznik-1 licznik-2 3

name

Składnik name jest wymaganym składnikiem wzorca wartości właściwości counter-increment. Składnik name określa nazwę licznika, którego wartość chcemy zmienić.

Dostępne wartości

nazwa istniejącego licznika

Wartość domyślna

brak

change

Składnik change nie jest wymaganym składnikiem wzorca wartości właściwości counter-increment. Składnik change określa o jaką wartość powinna zmienić się wartość posiadana przez interesujący nas licznik.

Dostępne wartości

dowolna liczba całkowita

Wartości dodatnie

wartości dodatnie zwiększają wartość posiadaną przez licznik

Wartości ujemne

wartości ujemne zmniejszają wartość posiadaną przez licznik

Wartość domyślna

1

Przykład

  counter-increment:licznik-1 2;
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Każdy z przykładowych elementów "div" zwiększa wartość posiadaną przez licznik o nazwie "licznik-1" o wartość równą wartości "2", ponieważ do każdego ze wspomnianych elementów "div" została dodana właściwość "counter-increment" wraz z następującymi wartościami: "licznik-1 2".

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 {
        counter-increment:licznik-1 2;
      }

      figure > div::before {
        content:counter(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>