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

115

Tengo una lista ordenada donde me gustaría que el número inicial fuera 6. Descubrí que esto era compatible (ahora en desuso) en HTML 4.01. En esta especificación, dicen que puede especificar el número entero inicial usando CSS. (en lugar del startatributo)

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

html css html-lists

— vrish88
fuente

148

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

<!doctype html>

Con ese doctype, es válido establecer un startatributo en una lista ordenada. Como:

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>

Expandir fragmento

— Travis
fuente

7

¿sigue siendo esto exacto?

— antony.trupe

3

Esta respuesta es precisa usando HTML5, sí.

— Travis

El atributo de inicio también funciona para listas desordenadas (<ul>) como: <ul style = "list-style-type: lower-roman;" start = "4"> y comenzará la lista en 'iv' o <ul style = "list-style-type: upper-alpha;" start = "4"> comenzando el 'D'

— Matthew Cox

66

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

— Ms2ger
fuente

32

start="number" apesta porque no cambia automáticamente según la numeración anterior.

Otra forma de hacer esto que puede adaptarse a necesidades más complicadas es usar counter-resety counter-increment.

Problema

Di que quieres algo como esto:

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Puede establecer start="3"el tercero lidel segundo ol, pero ahora deberá cambiarlo cada vez que agregue un elemento al primerool

Solución

Primero, borremos el formato de nuestra numeración actual.

ol {
  list-style: none;
}

Haremos que cada li muestre el mostrador

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

Ahora solo necesitamos asegurarnos de que el contador se restablezca solo en el primero en ollugar de en cada uno.

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

Manifestación

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

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

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

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

— Adam Grant
fuente

También puede especificar sus propios números explícitamente: stackoverflow.com/a/31823704/320036

— z0r

2

ol li {...}debería ser ol li:before {...} - de lo contrario esta es la solución perfecta, ¡gracias!

— Davor

15

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 de inicio para una lista ordenada usando CSS en lugar de HTML, puede usar la counter-incrementpropiedad de la siguiente manera:

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

counter-incrementparece 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

Mira mi violín

Consulte también la referencia wiki de W3

— hcmcf
fuente

1

Gran respuesta. Esto ha sido un salvavidas, gracias.

— Andrea

9

Como sugirieron otros, se puede usar el startatributo del olelemento.

Alternativamente, se puede usar el valueatributo del lielemento. Ambos atributos están marcados como obsoletos en HTML 4.01 , pero no en HTML 5 ( oly li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>

Expandir fragmento

— Andrey
fuente

1

Comenzar la numeración de una lista ordenada en un número que difiera del valor predeterminado ("1") requiere el startatributo. Este atributo estaba permitido (no obsoleto) en la especificación HTML 4.01 (HTML 4.01 aún no era una "Especificación reemplazada" en el momento en que se publicó esta pregunta) y todavía está permitido en la especificación HTML 5.2 actual . El olelemento también tenía un startatributo opcional en la DTD de transición de XHTML 1.0 pero no en la DTD estricta de XHTML 1.0 (busque la cadena ATTLIST oly verifique la lista de atributos). Entonces, a pesar de lo que dicen algunos de los comentarios anteriores, el startatributo no fue desaprobado ; más bien era inválidoen los DTD estrictos de HTML 4.01 y XHTML 1.0. A pesar de lo que afirma uno de los comentarios, el startatributo no está permitido en el ulelemento y actualmente no funciona en Firefox y Chromium.

Tenga en cuenta también que un separador de miles no funciona (en las versiones actuales de Firefox y Chromium). En el siguiente fragmento de código, 10.000se interpretará como 10; lo mismo se aplica a 10,000. Por lo tanto, no use el siguiente tipo de countervalor:

<ol start="10.000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Entonces, lo que debe usar es lo siguiente (en los raros casos en los que se requieren valores superiores a 1000):

<ol start="10000">
  <li>Item 10.000</li>
  <li>Next item</li>
  <li>Next item</li>
</ol>

Algunas de las otras respuestas sugieren usar la propiedad CSS counter, pero esto va en contra de la separación tradicional de contenido y diseño (en HTML y CSS, respectivamente). Los usuarios con ciertas discapacidades visuales pueden usar sus propias hojas de estilo y, como resultado, los countervalores pueden perderse. counterTambién se debe probar la compatibilidad con lectores de pantalla . La compatibilidad con lectores de pantalla para contenido en CSS es una característica relativamente reciente y el comportamiento no es necesariamente coherente. Consulte Lectores de pantalla y CSS: ¿Estamos pasando de moda (y entrando en contenido)? por John Northup en el blog WebAIM (agosto de 2017).

— Tsundoku
fuente

0

En caso de que las listas estén anidadas, tiene que haber un manejo que omita los elementos de la lista anidada, lo que logré verificando que el abuelo no es un elemento de la lista.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
var cnt = 0;
for (var i=0;i<list.length;i++){
  if (list[i].parentElement.parentElement.nodeName!="LI") {
    cnt += 1;
    list[i].setAttribute("value",cnt);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Expandir fragmento

— LoonyNoob
fuente

0

Con CSS es un poco complicado cubrir el caso de que hay elementos de lista anidados, por lo que solo el primer nivel de lista obtiene la numeración personalizada que no se interrumpe con cada nueva lista ordenada. Estoy usando el combinador CSS '>' para definir las posibles rutas a los elementos de la lista que obtendrán una numeración personalizada. Ver https://www.w3schools.com/css/css_combinators.asp

body {
  counter-reset: li_cnt;
}
/* discard auto generated numbers */
ol {
  list-style-type: none;
}
/* all possible paths to the list item that shall have custom numbering */
section#TheContent > ol > li:before,
body > ol > li:before {
  counter-increment: li_cnt;
  content: counter(li_cnt)'. '; /* add own numbers */
}
/* switch on default auto generated numbers for nested list items */
li > ol {
  list-style-type: decimal;
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
<h2>Ordered Lists - numbering not interupted</h2>
<p>This example avoids for the first list level that each ordered list starts with 1:</p>

<p><strong>1st list:</strong></p>
<ol>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ol>

<p><strong>2nd list:</strong></p>
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</section>

</body>
</html>

Expandir fragmento

— LoonyNoob
fuente

-1

Obviamente, ni @start de una lista ordenada <ol> ni @value de un elemento de lista <li> se pueden establecer mediante CSS. Consulte https://www.w3schools.com/css/css_list.asp

Reemplazar la numeración por un contador en CSS parece ser la mejor / más rápida / infalible solución y hay otras que la promocionan, por ejemplo, https://css-tricks.com/numbering-in-style/

Con JavaScript puro es posible establecer @value de cada elemento de la lista, pero esto, por supuesto, es más lento que CSS. Ni siquiera es necesario comprobar si el elemento de la lista pertenece a una lista ordenada <ol>, porque las listas desordenadas se excluyen automáticamente.

var section = document.getElementById("TheContent");
var list = section.getElementsByTagName("li");
for (var i=0; i<list.length; i++){
  if (list[i].parentElement.nodeName=="OL") {
    list[i].setAttribute("value",i+1);
  }
}

<!DOCTYPE html>
<html>
<body>

<section id="TheContent">
  <h2>Ordered Lists - numbering not interupted</h2>
  <p>This example avoid that each ordered list starts with 1:</p>

  <p><strong>1st list:</strong></p>
  <ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ol>

  <p><strong>2nd list:</strong></p>
  <ol>
    <li>list item 4</li>
    <li>list item 5</li>
    <li>list item 6</li>
  </ol>
  </section>

</body>
</html>

Expandir fragmento

— LoonyNoob
fuente