Ominaisuus counter-increment

Ominaisuus counter-increment asettaa automaattisen elementtien numerointiin, esimerkiksi kappaleiden tai otsikoiden. Sitä käytetään yhdessä ominaisuuden counter-reset, pseudoelementtien after ja before, ominaisuuden content kanssa, jossa käytetään funktiota counter. Parempaa ymmärtämistä varten suosittelen katsomaan esimerkkejä.

Syntaksi

cssvalitsija {
  counter-increment: nimi [askel] | none;
}

Arvot

Oletusarvo: none.

Esimerkki

Tehdään niin, että kappaleet numeroidaan automaattisesti:

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

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

Результат:

Esimerkki

Olkoon numerointiin lisäksi lisätty jokin teksti. Meidän tapauksessamme № ennen numeroa ja piste jälkeen:

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

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

Результат:

Esimerkki

Aloitetaan numerointi 10:stä. Tätä varten asetamme laskurin alkuarvoksi yhdeksän, eli 1 vähemmän kuin tarvitsemme:

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

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

Результат:

Esimerkki

Olkoon numerointi nyt askeleella "2". Tätä varten asetamme askeleeksi kaksi:

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

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

Результат:

Esimerkki

Edellisessä esimerkissä numerointi alkoi kahdesta, mutta halusimme yhdestä. Miksi näin tapahtui? Koska counter-reset nollaa laskurin arvon nollaan, ja sitten counter-increment lisää oman askeleensa: oletusarvoisesti yhden, siksi aiemmin meillä numerointi alkoi 1:stä. Mutta nyt lisätään kaksi - ja numerointi alkaa kahdesta.

Ongelman korjaamiseksi asetamme laskurin alkuarvoksi -1 ja nyt numerointi alkaa 1:stä ja kasvaa 2:lla:

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

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

Результат:

Katso myös