É possível especificar um número inicial para uma lista ordenada?

114

Tenho uma lista ordenada onde gostaria que o número inicial fosse 6. Descobri que isso era compatível (agora obsoleto) no HTML 4.01. Nesta especificação, eles dizem que você pode especificar o inteiro inicial usando CSS. (em vez do startatributo)

Como você especificaria o número inicial com CSS?

html css html-lists vrish88
fonte

147

Se você precisar da funcionalidade para iniciar uma lista ordenada (OL) em um ponto específico, terá que especificar seu doctype como HTML 5; qual é:

<!doctype html>

Com esse doctype, é válido definir um startatributo em uma lista ordenada. Tal como:

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

Expandir trecho

Travis
fonte

7

isso ainda é preciso?

antony.trupe

3

Essa resposta é precisa usando HTML5, sim.

Travis de

O atributo start também funciona para listas não ordenadas (<ul>) também como: <ul style = "list-style-type: lower-roman;" start = "4"> e começará a lista em 'iv' ou <ul style = "list-style-type: upper-alpha;" start = "4"> começando em 'D'

Matthew Cox

66

<ol start="">não está mais obsoleto no HTML5 , então eu continuaria usando-o, independentemente do que o HTML4.01 diga.

Ms2ger
fonte

32

start="number" é uma merda porque não muda automaticamente com base na numeração anterior.

Outra maneira de fazer isso que pode atender a necessidades mais complicadas é usar counter-resete counter-increment.

Problema

Digamos que você queira algo assim:

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Você poderia definir start="3"no terceiro lidia ol, mas agora você precisará alterá-lo toda vez que adicionar um item ao primeirool

Solução

Primeiro, vamos limpar a formatação de nossa numeração atual.

ol {
  list-style: none;
}

Faremos cada li mostrar o contador

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

Agora, só precisamos ter certeza de que o contador zera apenas no primeiro em olvez de em cada um.

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

Demo

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

Agora posso adicionar quantos itens a qualquer lista e a numeração será preservada.

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
fonte

Você também pode especificar seus próprios números explicitamente: stackoverflow.com/a/31823704/320036

z0r 05 de

2

ol li {...}deveria ser ol li:before {...} - caso contrário, esta é a solução perfeita, obrigado!

Davor

15

Estou surpreso por não ter conseguido encontrar a resposta neste tópico.

Encontrei esta fonte , que resumi abaixo:

Para definir o atributo start para uma lista ordenada usando CSS em vez de HTML, você pode usar a counter-incrementpropriedade da seguinte maneira:

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

counter-increment parece ser 0 indexado, então para obter uma lista que começa em 4, use 3 .

Para o seguinte HTML

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

Meu resultado é

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

Olha meu violino

Veja também a referência do wiki W3

hcmcf
fonte

1

Ótima resposta. Isso salvou sua vida, obrigado.

Andrea

9

Como outros sugeriram, pode-se usar o startatributo do olelemento.

Alternativamente, pode-se usar o valueatributo do lielemento. Ambos os atributos estão marcados como obsoletos no HTML 4.01 , mas não no HTML 5 ( ole li).

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

Expandir trecho

Andrey
fonte

1

Iniciar a numeração de uma lista ordenada em um número diferente do valor padrão ("1") requer o startatributo. Este atributo foi permitido (não obsoleto) na especificação HTML 4.01 (HTML 4.01 ainda não era uma "Especificação Substituída" no momento em que esta questão foi postada) e ainda é permitido na especificação HTML 5.2 atual . O olelemento também tinha um startatributo opcional no DTD transicional do XHTML 1.0, mas não no DTD estrito do XHTML 1.0 (pesquise a string ATTLIST ole verifique a lista de atributos). Portanto, apesar do que alguns dos comentários mais antigos dizem, o startatributo não foi preterido ; ao contrário, era inválidonos DTDs estritos de HTML 4.01 e XHTML 1.0. Apesar do que afirma um dos comentários, o startatributo não é permitido noul elemento e atualmente não funciona no Firefox e Chromium.

Observe também que o separador de milhares não funciona (nas versões atuais do Firefox e do Chromium). No seguinte trecho de código, 10.000será interpretado como 10; o mesmo se aplica a 10,000. Portanto, não use o seguinte tipo de countervalor:

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

Portanto, o que você deve usar é o seguinte (nos raros casos em que valores superiores a 1000 são obrigatórios):

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

Algumas das outras respostas sugerem o uso da propriedade CSS counter, mas isso contraria a separação tradicional de conteúdo e layout (em HTML e CSS, respectivamente). Usuários com certas deficiências visuais podem usar suas próprias folhas de estilo e os countervalores podem ser perdidos como resultado. O suporte ao leitor de tela para countertambém deve ser testado. O suporte do leitor de tela para conteúdo em CSS é um recurso relativamente recente e o comportamento não é necessariamente consistente. Consulte Leitores de tela e CSS: estamos saindo do estilo (e entrando no conteúdo)? por John Northup no blog WebAIM (agosto de 2017).

Tsundoku
fonte

0

No caso de as listas serem aninhadas, deve haver uma manipulação deixando de fora os itens da lista aninhados, o que fiz ao verificar que o avô não é um item da 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 trecho

LoonyNoob
fonte

0

Com CSS é um pouco complicado cobrir o caso de haver itens de lista aninhados, portanto, apenas o primeiro nível da lista obtém a numeração personalizada que não interrompe a cada nova lista ordenada. Estou usando o combinador CSS '>' para definir os caminhos possíveis para os itens da lista que receberão uma numeração personalizada. Veja 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 trecho

LoonyNoob
fonte

-1

Obviamente, nem @início de uma lista ordenada <ol> nem @valor de um item de lista <li> podem ser definidos via CSS. Vejo https://www.w3schools.com/css/css_list.asp

Substituir a numeração por um contador em CSS parece ser a solução melhor / mais rápida / infalível e há outros que a promovem, por exemplo, https://css-tricks.com/numbering-in-style/

Com JavaScript puro é possível definir @value para cada item da lista, mas isso é mais lento do que CSS. Não é nem mesmo necessário verificar se o item da lista pertence a uma lista ordenada <ol>, porque as listas não ordenadas são omitidas automaticamente.

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 trecho

LoonyNoob
fonte

É possível especificar um número inicial para uma lista ordenada?

Respostas: