Autor publikacji
Virtual Patriot - Administrator

counter-increment

Data publikacji
Ostatnio edytowano

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.

Informacje dodatkowe

brak

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

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

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

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ć.

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.

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>