Egenskaben counter-increment

Egenskaben counter-increment angiver automatisk nummerering af elementer, for eksempel, afsnit eller overskrifter. Anvendes sammen med egenskaben counter-reset, pseudoelementerne after og before, egenskaben content, hvori funktionen counter anvendes. For en bedre forståelse anbefaler jeg at se eksemplerne.

Syntaks

cssselektor {
  counter-increment: navn [trin] | none;
}

Værdier

Standardværdi: none.

Eksempel

Lad os sørge for, at afsnit nummereres automatisk:

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

Результат:

Eksempel

Lad os ud over nummereringen tilføje noget andet tekst. I vores tilfælde № før tallet og et punktum efter:

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

Результат:

Eksempel

Lad os starte nummereringen fra 10. For at gøre dette sætter vi startværdien af tælleren til ni, det vil sige 1 mindre end vi har brug for:

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

Результат:

Eksempel

Lad nummereringen nu være med et trin på "2". For at gøre dette sætter vi to som trin:

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; /* sætter to */
  content: "№" counter(test) ".";
}

Результат:

Eksempel

I det foregående eksempel startede nummereringen med to, men vi ville gerne starte med en. Hvorfor skete dette? Fordi counter-reset nulstiller tællerværdien til nul, og derefter tilføjer counter-increment sit trin: som standard en, derfor startede vores nummerering tidligere med 1. Men nu lægges der to til - og nummereringen starter med to.

For at løse problemet sætter vi den startende værdi af tælleren til -1, og nu starter nummereringen med 1 og vil øges med 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) ".";
}

Результат:

Se også