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

115

J'ai une liste ordonnée où je voudrais que le nombre initial soit 6. J'ai trouvé que cela était pris en charge (maintenant obsolète) 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 l' startattribut)

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

html css html-lists vrish88
la source

Réponses:

148

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

<!doctype html>

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

<ol start="6">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</ol>
Développer l'extrait

Travis
la source
7
est-ce toujours exact?
antony.trupe
3
Cette réponse est exacte en utilisant HTML5, oui.
Travis
L'attribut start fonctionne également pour les listes non ordonnées (<ul>) comme: <ul style = "list-style-type: lower-roman;" start = "4"> et commencera la liste sur 'iv' ou <ul style = "list-style-type: upper-alpha;" start = "4"> à partir de 'D'
Matthew Cox
66

<ol start="">n'est plus obsolète en HTML5 , je continuerais donc à l'utiliser, indépendamment de ce que dit HTML4.01.

Ms2ger
la source
32

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

Une autre façon de faire cela qui peut répondre à des besoins plus complexes consiste à utiliser counter-resetet counter-increment.

Problème

Dites que vous vouliez 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"le troisième lidu second ol, mais vous devrez maintenant le modifier chaque fois que vous ajoutez un élément au premierol

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 simplement nous assurer que le compteur se réinitialise uniquement sur le premier olau lieu de chacun.

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

Démo

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

Maintenant, je peux ajouter autant d'éléments à l'une ou l'autre 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
...
Adam Grant
la source
Vous pouvez également spécifier vos propres numéros explicitement: stackoverflow.com/a/31823704/320036
z0r
2
ol li {...}devrait être ol li:before {...} - sinon c'est la solution parfaite, merci!
Davor
15

Je suis surpris de ne pas avoir 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 counter-incrementpropriété comme suit:

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

counter-incrementsemble être indexé à 0, donc pour obtenir une liste commençant à 4, utilisez 3.

Pour le 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

Regarde mon violon

Voir aussi la référence du wiki W3

hcmcf
la source
1
Très bonne réponse. Cela a sauvé la vie, merci.
Andrea
9

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

Alternativement, on peut utiliser l' valueattribut d' liélément. Les deux attributs sont marqués comme obsolètes dans HTML 4.01 , mais pas dans HTML 5 ( olet li).

<ol start="-2">
  <li>Alpha</li>
  <li>Beta</li>
  <li value="10">Gamma</li>
  <li>Delta</li>
</ol>
Développer l'extrait

Andreï
la source
1

Le démarrage de la numérotation d'une liste ordonnée à un nombre différent de la valeur par défaut ("1") nécessite l' startattribut. 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 la spécification HTML 5.2 actuelle . L' olélément avait également un startattribut facultatif dans la DTD de transition de XHTML 1.0 mais pas dans la DTD stricte de XHTML 1.0 (recherchez la chaîne ATTLIST olet vérifiez la liste d'attributs). Donc, malgré ce que disent certains des commentaires plus anciens, l' startattribut n'était pas obsolète ; c'était plutôt invalidedans les DTD stricts de HTML 4.01 et XHTML 1.0. Malgré ce que l'un des commentaires prétend, l' startattribut n'est pas autorisé sur leul élément et ne fonctionne actuellement pas 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.000sera interprété comme 10; il en va de même pour 10,000. N'utilisez donc pas le type de countervaleur suivant:

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

Donc, ce que vous devez utiliser est le suivant (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 mise en page (en HTML et CSS, respectivement). Les utilisateurs ayant certaines déficiences visuelles peuvent utiliser leurs propres feuilles de style, et les countervaleurs peuvent être perdues en conséquence. La prise en charge du lecteur d'écran pour counterdoit également être testée. La prise en charge du lecteur d'écran pour le contenu en CSS 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 sortir du style (et du contenu)? par John Northup sur le blog WebAIM (août 2017).

Tsundoku
la source
0

Dans le cas où les listes sont imbriquées, il doit y avoir une gestion en laissant de côté les éléments de liste imbriqués, ce que j'ai accompli 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>
Développer l'extrait

LoonyNoob
la source
0

Avec CSS, il est un peu difficile de couvrir le cas où il y a des éléments de liste imbriqués, donc seul le premier niveau de liste obtient la numérotation personnalisée qui n'interrompt pas 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 recevront 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>
Développer l'extrait

LoonyNoob
la source
-1

Évidemment, ni @start d'une liste ordonnée <ol> ni @value 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 solution la meilleure / la plus rapide / infaillible et il y en a d'autres qui en font la promotion, par exemple https://css-tricks.com/numbering-in-style/

Avec du JavaScript pur, il est possible de définir @value de chaque élément de la liste, mais c'est bien sûr plus lent que 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 automatiquement omises.

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>
Développer l'extrait

LoonyNoob
la source