¿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?
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>
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.
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
...
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>
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
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