Proprietatea counter-increment

Proprietatea counter-increment definește numerotarea automată a elementelor, de exemplu, a paragrafelor sau a titlurilor. Este utilizată împreună cu proprietatea counter-reset, pseudoelementele after și before, proprietatea content, în interiorul căreia este utilizată funcția counter. Pentru o mai bună înțelegere vă recomand să consultați exemplele.

Sintaxă

cssselector {
  counter-increment: nume [increment] | none;
}

Valori

Valoarea implicită: none.

Exemplu

Să facem ca paragrafele să fie numerotate automat:

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

Результат:

Exemplu

Să presupunem că în afară de numerotare se adaugă și un text. În cazul nostru № înaintea cifrei și un punct după:

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) ".";
}

Результат:

Exemplu

Să începem numerotarea de la 10. Pentru aceasta setăm valoarea inițială a contorului la nouă, adică cu 1 mai puțin decât avem nevoie:

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) ".";
}

Результат:

Exemplu

Să presupunem că acum numerotarea va fi cu pasul "2". Pentru aceasta, ca increment setăm doi:

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; /* setăm doi */
  content: "№" counter(test) ".";
}

Результат:

Exemplu

În exemplul anterior numerotarea a început de la doi, dar noi am fi vrut de la unu. De ce s-a întâmplat așa? Pentru că counter-reset resetează valoarea contorului la zero, iar apoi counter-increment adaugă incrementul său: implicit unu, de aceea înainte numerotarea noastră începea de la 1. Acum se adaugă doi - și numerotarea începe de la doi.

Pentru a remedia problema, setăm valoarea inițială a contorului la -1 și acum numerotarea va începe de la 1 și va crește cu 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) ".";
}

Результат:

Veți și