CSS 2.1 omogoča avtomatsko številčenje z uporabo CSS števca:

Avtomatsko številčenje naslovov

Pri avtomatskem številčenju moramo najprej ponastaviti števec na začetno vrednost, kar storimo z lastnostjo counter-reset. Kot vrednost lastnosti navedemo ime števca, ki je lahko poljubno. Opcijsko lahko navedemo tudi začetno številčno vrednost števca. Če ne priredimo številčne vrednosti, se števec postavi na 0. Primer:

counter-reset: stevec 4;

V primeru smo začetno vrednost števec postavili na 4, kar pomeni, da se bo štetje začelo s 5.

Za tem moramo določiti kdaj naj se števec poveča in za kakšno vrednost To storimo z lastnostjo counter-increment. Če lastnosti ne priredimo številčne vrednosti, se privzeto števec povečuje za 1.

Primer avtomatskega številčenja naslovov:

<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, #counter h2:before { 
   content: counter(section) "." 
   counter(sub-section) " "; 
}
#counter h2:before { counter-increment: sub-section }

Glavni naslov

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra, est quis sollicitudin vulputate, quam nibh aliquam odio, in commodo mi lorem eget dolor.

Glavni naslov

Sed eget risus ac felis aliquam pellentesque. Nam sodales sollicitudin odio semper tincidunt. Phasellus id finibus tellus.

Podnaslov

Donec convallis scelerisque dapibus. Aenean aliquet ut erat sed bibendum. Praesent pharetra justo sit amet massa lobortis rhoncus.

Podnaslov

Sed vestibulum augue leo, nec iaculis quam ullamcorper sit amet. Donec laoreet dictum sem, ac luctus urna commodo a.

Podnaslov

Suspendisse bibendum sapien vitae lorem lacinia, ac mattis libero interdum.

Glavni naslov

Nulla pharetra, lectus a fringilla maximus, quam tortor facilisis elit, vitae faucibus magna tortor vitae est.

Glavni naslov

Integer at velit nisi. Nam eu tempus magna, eu tristique magna. Etiam interdum venenatis nulla vel commodo. Integer non congue mi. Nunc nulla ex, tempus eget erat rutrum, euismod iaculis arcu.

Avtomatsko številčenje gnezdenega seznama

Pri avtomatskem številčenju lahko uporabimo tudi več števcev. Pri gnezdenih seznamih s funkcijo counters() številčimo vsak posamezen nivo:

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

Besedilo v 1. nivoju
1. Besedilo v 2. nivoju
  1. Besedilo v 3. nivoju: prva postavka
  2. Besedilo v 3. nivoju: druga postavka
  3. Besedilo v 3. nivoju: tretja postavka
2. Besedilo v 2. nivoju
Besedilo v 1. nivoju

Nazaj

Naprej