CSS Nummerering

Vanligvis bruker du <ol> <li> for å lage nummererte lister. Du får da en liste nummerert som vist under:

1. Punkt ein
2. Punkt to

Dersom du ønsker å nummerere andre elementer enn ol og li kan du bruke følgende css som et utgangspunkt:

body {
  counter-reset: oppgave;    /* lager en teller med navnet oppgave */
}

div.oppgave::before {
  content: counter(oppgave) ") ";
  counter-increment: oppgave;
  counter-reset: deloppgave;    /* lager en teller for deloppgaver */
}

div.oppgave > p::before {
  content: counter(deloppgave, lower-latin) ") ";  
  counter-increment: deloppgave;
}

Her ønsker jeg at alle <div class="oppgave"> skal nummereres 1) 2) ...

Inne i slike div-er skal alle paragrafer nummereres med a) b) c) ...

Legg merke til counter(deloppgave, lower-latin) - her gir jeg beskjed om at jeg ønsker a) b) ...
som nummerering for denne telleren.

Du kan velge fra denne lista med nummereringer:

• decimal: 1,2,3, ...
• decimal-leading-zero : 01 02 ..
• lower-roman : i, ii, iii, iv ...
• lower-greek: α, β, γ ...
• lower-alpha, lower-latin: a,b,c...
• upper-xxx (roman,greek,alpha,latin)