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

Question

J'ai une liste ordonnée dont je voudrais que le numéro initial soit 6. J'ai trouvé que c'était supporté par (maintenant déprécié) dans 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 la balise start attribut)

Comment spécifier le numéro de départ avec CSS ?

Answer 1

Via HTML, en utilisant le start attribut

Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Il s'agit toujours d'un chiffre arabe (1, 2, 3, etc.), même lorsque le type de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez start="4".

<ol start="10">
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

Via CSS, en utilisant Compteurs CSS :

Les compteurs CSS vous permettent d'ajuster l'apparence du contenu en fonction de son emplacement dans un document. Par exemple, vous pouvez utiliser des compteurs pour numéroter automatiquement les titres d'une page Web. Les compteurs sont, par essence, des variables gérées par CSS dont les valeurs peuvent être incrémentées par des règles CSS pour suivre le nombre de fois où elles sont utilisées.

ol {
  list-style: none;
  counter-reset: li 9; /* syntax: "counter name" "init value" */
}

ol li:before {
  counter-increment: li; /* for every appearance, add one */
  content: counter(li) ". "; /* mimic default ol list-style */
}

<ol>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

Answer 2

Commencer la numérotation d'une liste ordonnée à un nombre différent de la valeur par défaut ("1") nécessite l'utilisation de l'attribut start attribut. Cet attribut était autorisé (et non déprécié) dans la norme Spécification HTML 4.01 (HTML 4.01 n'était pas encore une "Superseded Specification" au moment où cette question a été postée) et est toujours autorisé dans la version actuelle de la norme Spécification HTML 5.2 . Le site ol a également un élément facultatif start l'attribut dans La DTD transitoire de XHTML 1.0 mais pas dans La DTD stricte de XHTML 1.0 (recherche de la chaîne de caractères ATTLIST ol et vérifiez la liste des attributs). Ainsi, en dépit de ce que disent certains commentaires plus anciens, les start n'était pas déprécié ; c'était plutôt invalide dans les DTD strictes de HTML 4.01 et XHTML 1.0. En dépit de ce que prétend l'un des commentaires, la norme start n'est pas autorisé sur le 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 . N'utilisez donc pas le type suivant de counter valeur :

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

Vous devriez donc utiliser la formule suivante (dans les rares cas où des valeurs supérieures à 1000 sont nécessaires) :

<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 entre le contenu et la mise en page (respectivement en HTML et CSS). Les utilisateurs souffrant de certaines déficiences visuelles peuvent utiliser leurs propres feuilles de style, et le format counter des valeurs pourraient être perdues en conséquence. Support des lecteurs d'écran pour counter doit également être testé. La prise en charge du contenu en 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 : Sommes-nous en train de perdre notre style (et notre contenu) ? par John Northup sur le blog WebAIM (août 2017).

Answer 3

Dans le cas où les listes sont imbriquées, il doit y avoir une manipulation permettant de laisser de côté les éléments des listes imbriquées, ce que j'ai fait en vérifiant que le grand parent n'est pas un élément de 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>

Answer 4

Avec CSS, il est un peu difficile de couvrir le cas où il y a des éléments de liste imbriqués, donc seulement le premier niveau de liste reçoit la numérotation personnalisée qui n'est pas interrompue avec chaque nouvelle liste ordonnée. J'utilise le combinateur CSS '>' pour définir les chemins possibles vers les éléments de la liste qui doivent recevoir 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>

Answer 5

Il est évident que ni le @début d'une liste ordonnée <ol> ni la @valeur d'un élément de liste <li> ne peuvent être définis via CSS. Voir https://www.w3schools.com/css/css_list.asp

Remplacer la numérotation par un compteur en CSS semble être la meilleure solution, la plus rapide et la plus sûre, et d'autres personnes en font la promotion. https://css-tricks.com/numbering-in-style/

Avec du JavaScript pur, il est possible de définir la @valeur de chaque élément de la liste, mais cela est bien sûr plus lent que le CSS. Il n'est même pas nécessaire de vérifier si l'élément de liste appartient à une liste ordonnée <ol>, car les listes non ordonnées sont laissées de côté automatiquement.

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>