Les paradis artificiels

24 Jun, 2009

Numeraciˇ en les llistes ordenades amb CSS

CSS — 24 Juny 2009, 21:19

Per fer llistes ordenades en HTML tenim l'etiqueta <ol>, que numera els ítems de la llista (<li>) començant pel zero. Si es fa una subllista,

<ol>
  <li>Primer
  <ol>
    <li>Sub1</li>
    <li>Sub2</li>
  </ol>
  </li>
</ol>

els seus elements tornen a estar numerats a partir de l'1. Si el que es vol és tenir 1.1, 1.2, etc., ho podem fer utilitzant comptadors en el nostre full d'estil CSS:

ol {
  counter-reset: item;
}
ol ol {
  counter-reset: iitem;
}
ol li {
  display: block;
}
ol li:before {
  content: counter(item) ". ";
  counter-increment: item;
}
ol li ol li:before {
  content: counter(item) "." counter(iitem) ". ";
  counter-increment: iitem;
}

Comentaris


Afegeix un comentari






Powered by LifeType