Hacer que una lista ol comience desde un número diferente a 1 con CSS

Si necesitas crear una lista ordenada (lista ol) cuya numeración comience en un número diferente de 1, puedes hacerlo con css. Se puede hacer con el antiguo atributo "start", pero eso, es antiguo y depreciado (HTML5 vuelve a aceptar el atributo start). También se puede hacer especificando el atributo "value" en todos y cada uno de los elementos "<li>", pero esto es engorroso . Necesidades para querer hacer que la lista ordenada comience por otro número hay muchas y variadas, como por ejemplo mostrar partes de una misma lista en diferentes páginas debido a su longitud. En este caso, cada página comenzaría con el uno pero no se corresponde con nuestra intención.

Como hemos dicho, podríamos usar el atributo < ol start=”6″ > en la segunda página, pero este atributo ha sido depreciado y hay que evitar su uso (veremos que vuelve a ser aceptado en HTML5). La solución viene de las hojas de estilos CSS con la propiedad counter-reset: item. De este modo podríamos usar las siguientes propiedades en nuestro css:

ol#page_one { counter-reset: item; }
ol#page_two { counter-reset: item 5;}
li { display: block; }
li:before {
   content: counter(item) ". ";
   counter-increment: item;
}

Definiremos entonces la lista ol en cada página del siguiente modo:

<ol id="page_one">
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
    <li>Elemento 5</li>
</ol>
<ol id="page_two">
    <li>Elemento 6</li>
    <li>Elemento 7</li>
    <li>Elemento 8</li>
    <li>Elemento 9</li>
    <li>Elemento 10</li>
</ol>

Con esto, las listas ordenadas comenzarán con el número especificado en la propiedad css:

A tener en cuenta: Los elementos de la lista se cuentan igual que un array en programación, es decir, el primer elemento tiene el valor 0 (cero), el segundo el 1, etc. En otras palabras, el elemento que aparece numerado con el 1 tiene el valor cero, el elemento 2 tiene el valor 1, etc. Por tanto, la regla css ol{counter-reset: item 2;} daría como resultado que la lista comience por el número 3 (el elemento cuyo valor es 2 es el elemento 3). Es decir, hay que especificar un número menos del número con el que queremos que comience nuestra lista.

Si tenemos soporte para un lenguaje de programación, por ejemplo, php, podremos cambiar de forma dinámica el valor de counter-reset o del identificador de la lista para ajustarse a las necesidades de la página de forma que no tengamos que poner un código css para cada página.

Ejemplo: Si la página es del tipo http://www.midominio.com/noticias?page=2:

<?php 
if($_GET['page'] > 1){ 
 $counter = 5*($_GET['page'] - 1);//si nuestra lista contiene 5 elementos 
} else {  
 $counter = 0; 
} 
echo "<style type=\"text/css\">
ol#lista { counter-reset: item ".$counter.";}
 li { display: block }
 li:before {
   content: counter(item) \". \";
   counter-increment: item;
 }
</style>"; 
?>

Quiero también mencionar que es imprescindible establecer la regla li {display:block;} y li:before {content .....}. Si no se especifica, por alguna razón que desconozco, los números no aparecen en absoluto.

HTML5 vuelve a aceptar el atributo start

El artículo comenzaba diciendo que algo sobre el "antiguo y depreciado atributo start". He estado leyendo y resulta que el atributo start para listas ordenada (ol) es depreciado en documentos HTML 4.01, no es aceptado en documento XHTML 1.0 estrictos y que vuelve a estar aceptado en documentos HTML5. El atributo "start" especifica el número por el comenzará el contador de la lista y se especifica así:

<ol start="3">
 <li>Este item tendrá el número 3</li>
 <li>Este item tendrá el número 4</li>
</ol>

Otra característica de documentos HTML5 es que permite invertir el orden de listas ol. Vea cómo invertir el orden listas ol.

En otro post explicamos como dar estilo a una lista ol con css