Właściwość counter-increment

Właściwość counter-increment ustawia automatyczne numerowanie elementów, na przykład akapitów lub nagłówków. Używana wspólnie z właściwością counter-reset, pseudoelementami after i before, właściwością content, wewnątrz której używana jest funkcja counter. Dla lepszego zrozumienia polecam zapoznać się z przykładami.

Składnia

cssselektor {
  counter-increment: nazwa [krok] | none;
}

Wartości

Wartość domyślna: none.

Przykład

Sprawmy, aby akapity były numerowane automatycznie:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Przykład

Niech oprócz numeracji dodany będzie jeszcze jakiś tekst. W naszym przypadku № przed cyfrą i kropka po:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Przykład

Zacznijmy numerację od 10. W tym celu wartością początkową licznika ustawiamy dziewięć, czyli o 1 mniej, niż potrzebujemy:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Przykład

Niech teraz numeracja będzie z krokiem "2". W tym celu jako krok ustawiamy dwójkę:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* ustawiamy dwójkę */
  content: "№" counter(test) ".";
}

Результат:

Przykład

W poprzednim przykładzie numeracja zaczęła się od dwójki, a chcielibyśmy od jedynki. Dlaczego się tak stało? Ponieważ counter-reset resetuje wartości licznika do zera, a następnie counter-increment dodaje swój krok: domyślnie jedynkę, dlatego wcześniej nasza numeracja zaczynała się od 1. A teraz dodawana jest dwójka - i numeracja zaczyna się od dwójki.

Aby naprawić problem, ustawmy wartość początkową licznika na -1 i teraz numeracja zacznie się od 1 i będzie zwiększana o 2:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Zobacz też