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?
Respostas:
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>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 fourVocê 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
...ol li {...}deveria ser ol li:before {...} - caso contrário, esta é a solução perfeita, obrigado!
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 coffeeVeja também a referência do wiki W3
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>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).
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>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>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>