web-dev-qa-db-fra.com

Est-il possible de spécifier un numéro de départ pour une liste ordonnée?

J'ai une liste ordonnée où je voudrais que le nombre initial soit 6. J'ai trouvé qu'il s'agissait de supported (maintenant obsolète) en HTML 4.01. Dans cette spécification, ils disent que vous pouvez spécifier l'entier de départ en utilisant CSS. (au lieu de l'attribut start)

Comment spécifiez-vous le numéro de départ avec CSS?

htmlcsshtml-lists
100
vrish88

Si vous avez besoin de la fonctionnalité pour démarrer une liste ordonnée (OL) à un moment donné, vous devez spécifier votre type de document au format HTML 5; lequel est:

<!doctype html>

Avec ce doctype, il est valide de définir un attribut start sur une liste ordonnée. Tel que:

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

131
Travis

<ol start=""> n'est plus obsolète dans HTML5 , je continuerais donc à l'utiliser, peu importe ce que HTML4.01 dit.

63
Ms2ger

start="number" est nul car il ne change pas automatiquement en fonction de la numérotation qui le précède.

Une autre façon de faire qui pourrait répondre à des besoins plus complexes consiste à utiliser counter-reset et counter-increment.

Problème

Dis que tu voulais quelque chose comme ça: 

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

Vous pouvez définir start="3" sur la troisième li de la deuxième ol, mais vous devez maintenant la modifier chaque fois que vous ajoutez un élément à la première ol. 

Solution

Commençons par effacer le formatage de notre numérotation actuelle.

ol {
  list-style: none;
}

Nous aurons chaque li montrer le compteur

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

Maintenant, nous devons juste nous assurer que le compteur ne se réinitialise que sur la première ol au lieu de chacune.

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

Démo

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

Maintenant, je peux ajouter autant d’articles à la liste et la numérotation sera préservée.

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

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...
27
Adam Grant

Comme d'autres l'ont suggéré, on peut utiliser l'attribut start de l'élément ol.

Vous pouvez également utiliser l'attribut value de l'élément li. Les deux attributs sont marqués comme obsolètes dans HTML 4.01 , mais pas dans HTML 5 ( ol et li ).

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

8
Andrey

Je suis surpris que je n'ai pas pu trouver la réponse dans ce fil. 

J'ai trouvé cette source , que j'ai résumée ci-dessous:

Pour définir l'attribut de début d'une liste ordonnée à l'aide de CSS au lieu de HTML, vous pouvez utiliser la propriété counter-increment comme suit:

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

counter-increment semble être indexé sur 0, alors pour obtenir une liste commençant à 4, utilisez 3.

Pour le code HTML suivant

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

Mon résultat est

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

Découvrez mon violon

Voir aussi la Référence wiki W3

6
hcmcf

Dans le cas où les listes sont imbriquées, il doit exister un traitement qui exclut les éléments de la liste imbriquée, ce que j'ai accompli en vérifiant que le grand parent n'est pas un élément de la liste.

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>

0
LoonyNoob

Avec CSS, il est un peu délicat de traiter le cas d’éléments de liste imbriqués. Ainsi, seul le premier niveau de liste obtient la numérotation personnalisée qui n’interrompt pas chaque nouvelle liste ordonnée. J'utilise le combinateur CSS '>' pour définir les chemins possibles vers les éléments de liste qui doivent obtenir une numérotation personnalisée. Voir 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>

0
LoonyNoob

Le démarrage de la numérotation d'une liste ordonnée à un numéro différent de la valeur par défaut ("1") nécessite l'attribut start. Cet attribut était autorisé (non obsolète) dans la spécification HTML 4.01 (HTML 4.01 n'était pas encore une "spécification remplacée" au moment où cette question a été publiée) et est toujours autorisé dans le HTML 5.2 actuel). spécification . L'élément ol avait également un attribut start facultatif dans DTD transitoire de XHTML 1.0 mais pas dans DTD stricte de XHTML 1.0 (recherchez la chaîne ATTLIST ol et vérifiez la liste d'attributs). Donc, malgré ce que disent certains commentaires plus anciens, l'attribut start n'était pas deprecated; c'était plutôt invalid dans les DTD strictes de HTML 4.01 et XHTML 1.0. Malgré ce que dit l'un des commentaires, l'attribut start n'est pas autorisé sur l'élément ul et ne fonctionne pas actuellement dans Firefox et Chromium.

Notez également qu'un séparateur de milliers ne fonctionne pas (dans les versions actuelles de Firefox et Chromium). Dans l'extrait de code suivant, 10.000 sera interprété comme 10; il en va de même pour 10,000. Donc, n'utilisez pas le type suivant de valeur counter:

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

Vous devez donc utiliser les éléments suivants (dans les rares cas où des valeurs supérieures à 1000 sont requises):

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

Certaines des autres réponses suggèrent d'utiliser la propriété CSS counter, mais cela va à l'encontre de la séparation traditionnelle du contenu et de la présentation (en HTML et CSS, respectivement). Les utilisateurs souffrant de certaines déficiences visuelles peuvent utiliser leurs propres feuilles de style et les valeurs counter peuvent être perdues. La prise en charge du lecteur d’écran pour counter devrait également être testée. La prise en charge du contenu CSS par les lecteurs d’écran est une fonctionnalité relativement récente et le comportement n’est pas nécessairement cohérent. Voir Lecteurs d'écran et CSS: le style (et le contenu)?? De John Northup sur le blog de WebAIM (août 2017).

0
Christophe Strobbe