CSS omogoča samodejno številčenje in vstavljanje dodatne vsebine z uporabo števcev in lastnosti content. Ta pristop je uporaben pri številčenju naslovov, večnivojskih seznamov, korakov v navodilih, opomb in podobnih vsebin.

Generirana vsebina se najpogosteje prikaže s psevdoelementoma ::before in ::after. Tako lahko določene oznake, številke ali krajša pojasnila dodamo v prikaz, ne da bi jih morali zapisati neposredno v HTML kodo.

Osnovna pravila

• Števec moramo najprej ustvariti ali ponastaviti.
• Vrednost števca običajno povečujemo na elementih, ki jih želimo številčiti.
• Za prikaz števca uporabimo lastnost content.
• Za enonivojsko številčenje uporabimo funkcijo counter(), za gnezdeno pa pogosto counters().
• Generirana vsebina je uporabna kot dopolnitev prikaza, ne kot nadomestilo za pravilno HTML strukturo.

Osnovni gradniki CSS števcev

Pri samodejnem številčenju se najpogosteje uporabljajo naslednje lastnosti in funkcije:

Najpreprostejši primer izgleda takole:

.primer {
   counter-reset: stevec;
}
.primer p:before {
   counter-increment: stevec;
   content: counter(stevec) ". ";
}

Samodejno številčenje naslovov

Pri številčenju naslovov običajno uporabimo en števec za glavne naslove in drugega za podnaslove. Ob vsakem novem glavnem naslovu podštevec ponovno nastavimo na začetno vrednost.

Če pri counter-reset ne navedemo začetne številke, se števec postavi na 0. Če nato elementu dodamo counter-increment, bo prva prikazana vrednost 1.

<div id="counter">
   <h1>Glavni naslov</h1>
   <p>Lorem ipsum dolor sit amet...</p>
   <h1>Glavni naslov</h1>
   <p>Sed eget risus ac felis...</p>
   <h2>Podnaslov</h2>
   <p>Donec convallis scelerisque dapibus...</p>
   <h2>Podnaslov</h2>
   <p>Sed vestibulum augue...</p>
   <h2>Podnaslov</h2>
   <p>Suspendisse bibendum...</p>
   <h1>Glavni naslov</h1>
   <p>Nulla pharetra, lectus a...</p>
   <h1>Glavni naslov</h1>
   <p>Integer at velit nisi...</p>
</div>

#counter {
   counter-reset: section;
}
#counter h1 {
   counter-increment: section;
   counter-reset: sub-section;
}
#counter h1:before {
   content: counter(section) ". ";
}
#counter h2:before {
   counter-increment: sub-section;
   content: counter(section) "." counter(sub-section) " ";
}

Samodejno številčenje gnezdenih seznamov

Pri gnezdenih seznamih je posebej uporabna funkcija counters(), saj lahko združi vrednosti vseh trenutnih nivojev v eno številko, na primer 1.2.3.

<div id="counter2">
   <ol>
      <li>Besedilo v 1. nivoju
         <ol>
            <li>Besedilo v 2. nivoju
               <ol>
                  <li>Besedilo v 3. nivoju: prva postavka</li>
                  <li>Besedilo v 3. nivoju: druga postavka</li>
                  <li>Besedilo v 3. nivoju: tretja postavka</li>
               </ol>
            </li>
            <li>Besedilo v 2. nivoju</li>
         </ol>
      </li>
      <li>Besedilo v 1. nivoju</li>
   </ol>
</div>

#counter2 ol {
   counter-reset: section;
   list-style-type: none;
}
#counter2 ol li {
   counter-increment: section;
}
#counter2 ol li:before {
   content: counters(section, ".") ". ";
}

Številčenje korakov

CSS števce pogosto uporabljamo tudi za navodila po korakih. V takem primeru lahko vsak odstavek, element seznama ali drug blok dobi svojo zaporedno številko.

<div id="counter3">
   <p>Odpri datoteko HTML.</p>
   <p>Dodaj povezavo do slogovne datoteke.</p>
   <p>Shrani spremembe in osveži brskalnik.</p>
</div>

#counter3 {
   counter-reset: korak;
}
#counter3 p:before {
   counter-increment: korak;
   content: "Korak " counter(korak) ": ";
}

Začetna vrednost števca

Števec lahko začnemo tudi pri drugi vrednosti. Če na primer zapišemo counter-reset: poglavje 2;, bo prvi naslednji prikazani naslov označen s številko 3.

<div id="counter4">
   <h3>Uvod</h3>
   <h3>Osnovni pojmi</h3>
   <h3>Povzetek</h3>
</div>

#counter4 {
   counter-reset: poglavje 2;
}
#counter4 h3:before {
   counter-increment: poglavje;
   content: "Poglavje " counter(poglavje) " – ";
}

Lastnost counter-set

Lastnost counter-set nastavi števec na določeno vrednost. V primerjavi z counter-reset je uporabna predvsem takrat, ko želimo na določenem mestu spremeniti vrednost že uporabljenega števca.

Primer:

<div id="counter5">
   <p>To je prva opomba po nastavitvi vrednosti.</p>
   <p>To je druga opomba po nastavitvi vrednosti.</p>
   <p>To je tretja opomba po nastavitvi vrednosti.</p>
</div>

#counter5 {
   counter-set: opomba 4;
}
#counter5 p:before {
   counter-increment: opomba;
   content: "Opomba " counter(opomba) ": ";
}

Priporočila

• CSS števce uporabljaj tam, kjer želimo samodejno in dosledno številčenje.
• Za večnivojske strukture premišljeno določi, kje števec nastane in kje se povečuje.
• Generirano vsebino uporabljaj kot dopolnitev prikaza, ne kot nadomestilo za bistveno vsebino.
• Pri seznamih še vedno uporabljaj ustrezne HTML oznake, kadar imajo semantični pomen.
• Pri naslovih in navodilih preveri, ali je samodejno številčenje res pregledno in smiselno.

Pogoste napake

• Števec ni ponastavljen ali ustvarjen na ustreznem mestu.
• Vrednost števca se povečuje na napačnem elementu.
• Pri gnezdenih seznamih ni pravilno uporabljena funkcija counters().
• Generirana vsebina se uporablja za bistvene podatke, ki bi morali biti del HTML dokumenta.
• Predpostavlja se, da bo CSS števec sam nadomestil pravilno pomensko strukturo HTML.