A counter-increment tulajdonság

A counter-increment tulajdonság automatikus számozást határoz meg az elemek számára, például a bekezdések vagy a címsorok esetében. Együtt használható a counter-reset tulajdonsággal, a after és before pszeudo-elemekkel, valamint a content tulajdonsággal, amelyen belül a counter függvény használatos. A jobb megértés érdekében ajánlom a példák megtekintését.

Szintaxis

cssszelektor {
  counter-increment: név [lépés] | none;
}

Értékek

Alapértelmezett érték: none.

Példa

Állítsuk be, hogy a bekezdések automatikusan számozódjanak:

html<div id="parent">
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
</div>

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

Результат:

Példa

Tegyük fel, hogy a számozáson kívül még valamilyen szöveg is jelenjen meg. Esetünkben a № szöveg a szám előtt és egy pont utána:

html<div id="parent">
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
</div>

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

Результат:

Példa

Kezdjük a számozást 10-től. Ehhez a számláló kezdőértékét állítsuk kilencre, vagyis 1-gyel kevesebbre, mint amennyire szükségünk van:

html<div id="parent">
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
</div>

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

Результат:

Példa

Legyen most a számozás lépése "2". Ehhez a lépés értékét állítsuk kettőre:

html<div id="parent">
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* kettőt állítunk be */
  content: "№" counter(test) ".";
}

Результат:

Példa

Az előző példában a számozás kettőtől indult, de mi eggyel szerettük volna. Miért történt így? Mert a counter-reset nullára állítja vissza a számláló értékét, majd a counter-increment hozzáadja a lépését: alapértelmezetten egyet, ezért indult korábban a számozás 1-től. Most viszont kettőt ad hozzá - és a számozás kettőtől indul.

A probléma megoldásához állítsuk a kezdő értéket -1-re, és mostantól a számozás 1-től indul és 2-vel növekszik:

html<div id="parent">
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
  <p>szöveg</p>
</div>

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

Результат:

Lásd még