listas - title tag html
¿Es posible especificar un número inicial para una lista ordenada? (5)
Tengo una lista ordenada en la que me gustaría que el número inicial fuera 6. Encontré que esto era supported (ahora está en desuso) en HTML 4.01. En esta especificación, dicen que puede especificar el número entero inicial usando CSS. (en lugar del atributo de start )
¿Cómo se especifica el número inicial con CSS?
Como otros sugirieron, uno puede usar el atributo de start del elemento ol .
Alternativamente, uno puede usar el atributo de value del elemento li . Ambos atributos están 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>
Me sorprende que no haya podido encontrar la respuesta en este hilo.
Encontré esta fuente , que resumí a continuación:
Para establecer el atributo de inicio para una lista ordenada utilizando CSS en lugar de HTML, puede usar la propiedad de counter-increment 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, así 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
Mira mi fiddle
Ver también la referencia W3 wiki
Si necesita la funcionalidad para iniciar una lista ordenada (OL) en un punto específico, deberá especificar su doctype como HTML 5; cual es:
<!doctype html>
Con ese tipo de documento, es válido establecer un atributo de start en una lista ordenada. Como:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
<ol start=""> ya no está en desuso en HTML5 , así que seguiré usándolo, independientemente de lo que diga HTML4.01.
start="number" es una mierda porque no cambia automáticamente en función de la numeración que tiene delante.
Otra forma de hacer esto que puede ajustarse a las necesidades más complicadas es utilizar el counter-reset y counter-increment .
Problema
Digamos que quería algo como esto:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item four
Podría establecer start="3" en el tercer li del segundo ol , pero ahora deberá cambiarlo cada vez que agregue un elemento al primer ol
Solución
Primero, borremos el formato de nuestra numeración actual.
ol {
list-style: none;
}
Haremos que cada li muestre el contador
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}
Ahora solo debemos asegurarnos de que el contador se reinicie solo en el primer ol lugar de cada uno.
ol:first-of-type {
counter-reset: mycounter;
}
Manifestación
http://codepen.io/ajkochanowicz/pen/mJeNwY
Ahora puedo agregar tantos elementos a cualquier lista 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
...