¿Es posible especificar un número inicial para una lista ordenada?


Tengo una lista ordenada donde me gustaría que el número inicial de 6. Encontré que esto era soportado (ahora obsoleto) en HTML 4.01. En esta especificación dicen que puede especificar el entero inicial usando CSS. (en lugar del atributo start)

¿Cómo especificaría el número inicial con CSS?

Author: JJJ, 2009-04-23

5 answers

Si necesita la funcionalidad para iniciar una lista ordenada (OL) en un punto específico, tendrá que especificar su doctype como HTML 5; que es:

<!doctype html>

Con ese doctype, es válido establecer un atributo start en una lista ordenada. Tales como:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>
 126
Author: Travis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-10-15 19:00:22

<ol start=""> ya no está en desuso en HTML5, así que seguiré usándolo, independientemente de lo que diga HTML4.01.

 63
Author: Ms2ger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-25 15:20:27

start="number" apesta porque no cambia automáticamente en función de la numeración anterior.

Otra forma de hacer esto que puede ajustarse a necesidades más complicadas es usar counter-reset y counter-increment.

Problema

Di que querías algo como esto: {[14]]}

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Podrías establecer start="3" en el tercero li del segundo ol, pero ahora necesitarás cambiarlo cada vez que agregues un elemento al primero ol

Solución

Primero, vamos a borre el formato de nuestra numeración actual.

ol {
  list-style: none;
}

Haremos que cada li muestre el contador{[14]]}

ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}

Ahora solo tenemos que asegurarnos de que el contador se restablezca solo en el primer ol en lugar de cada uno.

ol:first-of-type {
  counter-reset: mycounter;
}

Demo

Http://codepen.io/ajkochanowicz/pen/mJeNwY

Ahora puedo agregar tantos elementos a cualquiera de las listas y la numeración se conservará.

1. Item one
2. Item two
...
n. Item n

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
 26
Author: Adam Grant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-04 22:41:17

Como otros sugirieron, se puede usar el atributo start del elemento ol.

Alternativamente, se puede usar el atributo value del elemento li. Ambos atributos marcados como obsoletos en HTML 4.01, pero no en HTML 5 (ol y li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>
 8
Author: Andrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-16 00:20:17

Me sorprende que no haya podido encontrar la respuesta en este hilo.

He encontrado esta fuente, que he resumido a continuación:

Para establecer el atributo start para una lista ordenada usando CSS en lugar de HTML, puede usar la propiedad counter-increment de la siguiente manera:

ol {
  list-style: none;
  counter-increment: start 3;
  }
li:before {
  content: counter(start, lower-alpha) ") ";
  counter-increment: start;
  }

counter-increment parece estar indexado en 0, por lo que para obtener una lista que comience en 4, use 3.

Para el siguiente HTML

<ol>
  <li>Buy milk</li>
  <li>Feed the dog</li>
  <li>Drink coffee</li>
</ol>

Mi resultado es

d) Buy milk
e) Feed the dog
f) Drink coffee

Echa un vistazo a mi violín

Ver también la referencia wiki de W3

 6
Author: hcmcf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-31 11:45:25