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 originalbody{
counter-reset:lista;
}
.reset{
counter-reset:lista;
}
ol li{
list-style-type: none;
}
ol li:before{
content: "("counter(lista) ")";
counter-increment: lista;
}
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?