Ostatnio edytowany:

counter-reset

Autor: Virtual Patriot

Opis właściwości counter-reset

Za pomocą właściwości counter-reset możemy określić licznik, jaki powinien zostać przypisany do interesującego nas elementu HTML.

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

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-reset

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-reset

none

Opis

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

Domyślnie do elementu HTML nie jest przypisany żaden konkretny licznik.

Przykład

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

Do żadnego z przykładowych elementów HTML nie został przypisany żaden konkretny licznik.

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 {
        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-reset oraz z góry zdefiniowanego wzorca wartości możemy określić licznik, jaki powinien zostać przypisany do interesującego nas elementu HTML.

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

Ważne

możemy podać więcej par składników name start, dzięki czemu do interesującego nas elementu HTML możemy przypisać większą liczbę liczników (składnik start 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-reset. Składnik name określa nazwę licznika, który chcemy przypisać do interesującego nas elementu HTML.

Dostępne wartości

wartość własna

Wartość domyślna

brak

start

Składnik start nie jest wymaganym składnikiem wzorca wartości właściwości counter-reset. Składnik start określa wartość startową jaką powinien posiadać licznik, który chcemy przypisać do interesującego nas elementu HTML.

Dostępne wartości

dowolna liczba całkowita

Wartość domyślna

0

Przykład

  counter-reset:licznik-1 5;
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"
przykładowy element "div"

Do przykładowego elementu "figure" został przypisany licznik posiadający nazwę "licznik-1" oraz posiadający wartość startową równą wartości "5", ponieważ do wspomnianego elementu "figure" została dodana właściwość "counter-reset" wraz z następującymi wartościami: "licznik-1 5".

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