Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/09/2010, 10:15
siameiz
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 15 años
Puntos: 1
counter y div

El objetivo de mi codigo es controlar la numeracion de las listas mediante clases. Así, si a una lista le asigno la clase "reset", la numeración de esa lista empezaria de nuevo por 1. Sino, continuaría con la numeración anterior. El problema es que dichas listas pueden ir en diferentes divs, y la numeración no sigue de un div a otro.

Por ejemplo, tengo el siguente codigo html:

Código HTML:
<div>
        <ol class="reset">
            <li>primer elemento</li>
            <li>segundo elemendo</li>
        </ol>
        <p>
            texto
        </p>
        <ol>
            <li>tercer elemento</li>
            <li>cuarto elemento</li>
        </ol>
        </div>
        
        <div>
        <ol>
            <li>quinto elemento</li>
            <li>sexto elemento</li>
        </ol>
        <p>
            texto
        </p>
        <ol class="reset">
            <li>primer elemento</li>
            <li>segundo elemento</li>
        </ol>
</div> 
y el siguiente codigo CSS:

Código CSS:
Ver original
  1. body{
  2.     counter-reset:lista;
  3. }
  4.  
  5. .reset{
  6.     counter-reset:lista;
  7. }
  8.  
  9. ol li{
  10.      list-style-type: none;
  11. }
  12.  
  13. ol li:before{
  14.  content: "("counter(lista) ")";
  15.  counter-increment: lista;
  16. }

quiero que la tercera lista siga la numeración de la anterior; que empice por 5. pero al estar en diferentes divs, lo que consigo es que la numeracion empiece de 1 de nuevo.

como podría conseguir que siguiera la numeración a pesar de estar en diferentes divs?