順序付きリストの開始番号を指定することはできますか?


114

最初の番号を6にしたい順序付きリストがあります。これはHTML 4.01でサポートされている(現在は非推奨)ことがわかりました。この仕様では、CSSを使用して開始整数を指定できると述べています。(start属性の代わりに)

CSSで開始番号をどのように指定しますか?

回答:


147

特定の時点で順序付きリスト(OL)を開始する機能が必要な場合は、doctypeをHTML 5として指定する必要があります。それは:

<!doctype html>

そのdoctypeではstart、順序付きリストに属性を設定することが有効です。といった:

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


7
これはまだ正確ですか?
antony.trupe 2012

3
この答えはHTML5を使用して正確です、はい。
Travis

start属性は、次のような順序付けされていない(<ul>)リストに対しても機能します。<ul style = "list-style-type:lower-roman;" start = "4">そして、 'iv'または<ul style = "list-style-type:upper-alpha;"でリストを開始します start = "4">「D」で始まる
マシューコックス

66

<ol start="">HTML5ではもう非推奨ではないので、HTML4.01の内容に関係なく、引き続き使用します。


32

start="number" それはその前の番号付けに基づいて自動的に変更されないので、吸います。

これを行うもう1つの方法は、より複雑なニーズに適合する可能性があり、counter-resetおよびを使用することcounter-incrementです。

問題

次のようなものが必要だとします。

1. Item one
2. Item two

Interruption from a <p> tag

3. Item three
4. Item four

2 start="3"番目の3番目liに設定することもできolますが、最初のアイテムにアイテムを追加するたびに変更する必要があります。ol

解決

まず、現在の番号付けの書式をクリアしましょう。

ol {
  list-style: none;
}

私たちはそれぞれの李にカウンターを見せます

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

ここで、カウンターがリセットされるのは、1 olつずつではなく最初のカウンターのみであることを確認する必要があります。

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

デモ

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

これで、どちらのリストにもいくつでもアイテムを追加でき、番号付けは保持されます。

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

Interruption from a <p> tag

n+1. Item n+1
n+2. Item n+2
...

あなたはまた、明示的に独自の番号を指定することができます。stackoverflow.com/a/31823704/320036
z0r

2
ol li {...}ol li:before {...} そうでなければなりません-そうでなければこれは完璧な解決策です、ありがとう!
Davor 2016

15

このスレッドで答えを見つけることができなかったことに驚いています。

私はこの情報源を見つけました。

HTMLの代わりにCSSを使用して順序付きリストの開始属性を設定するにはcounter-increment、次のようにプロパティを使用できます。

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

counter-incrementインデックスは0のようです。4から始まるリストを取得するには、を使用してください3

次のHTMLの場合

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

私の結果は

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

私のフィドルをチェック

W3 wikiリファレンスも参照してください。


1
すばらしい答えです。これは命の恩人でした、ありがとう。
Andrea

9

他の人が示唆したように、要素のstart属性を使用できますol

あるいは、要素のvalue属性を使用できますli。どちらの属性も、HTML 4.01では廃止予定としてマークされていますが、HTML 5(olおよびli)ではマークされていません。

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


1

順序付きリストの番号付けをデフォルト値( "1")とは異なる番号で開始するには、start属性が必要です。この属性はHTML 4.01仕様で許可されており(非推奨ではありません)(HTML 4.01はこの質問が投稿された時点ではまだ「置き換えられた仕様」ではありませんでした)、現在のHTML 5.2仕様でも許可されています。このol要素には、XHTML 1.0の移行DTDではオプションのstart属性もありましたが、XHTML 1.0の厳密なDTDではありません(文字列を検索して属性リストを確認します)。したがって、古いコメントのいくつかが言っているにもかかわらず、属性は廃止されませでした。むしろそれは無効でしたATTLIST olstartHTML 4.01とXHTML 1.0の厳密なDTDで。コメントの1つが主張しているにもかかわらず、このstart属性はul要素で許可されておらず、現在FirefoxおよびChromiumでは機能しません。

(現在のバージョンのFirefoxおよびChromiumでは)3桁ごとの区切り文字が機能しないことにも注意してください。次のコードスニペットで10.000は、として解釈され10ます。同じことがに適用され10,000ます。したがって、次のタイプのcounter値は使用しないでください。

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

したがって、使用する必要があるのは次のとおりです(まれに、1000より大きい値が必要になる場合があります)。

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

他の回答のいくつかはCSSプロパティの使用を提案していますcounterが、これはコンテンツとレイアウトの従来の分離(それぞれHTMLとCSS)に反します。特定の視覚障害を持つユーザーは、独自のスタイルシートを使用するcounter場合があり、その結果、値が失われる可能性があります。のスクリーンリーダーサポートcounterもテストする必要があります。CSSのコンテンツに対するスクリーンリーダーのサポートは比較的最近の機能であり、動作は必ずしも一貫していません。スクリーンリーダーとCSSを参照してくださいJohn NorthupによるWebAIMブログ(2017年8月)。


0

リストがネストされている場合、ネストされたリストアイテムを除外する処理が必要です。これは、祖父母がリストアイテムではないことを確認することで実現しました。

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

CSSでは、ネストされたリストアイテムがある場合をカバーするのが少し難しいので、最初のリストレベルだけが、新しい順序付けされた各リストと干渉しないカスタム番号付けを取得します。CSSコンビネーター '>'を使用して、カスタム番号付けを取得するリスト項目への可能なパスを定義しています。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>


-1

明らかに、順序付けられたリスト<ol>の@startもリストアイテム<li>の@valueもCSSを介して設定できません。https://www.w3schools.com/css/css_list.aspを参照してください

CSSでカウンターを番号に置き換えることは、最良/最速/間違いのない解決策のようであり、それを促進する他のものがあります。例えば、https//css-tricks.com/numbering-in-style/

純粋なJavaScriptでは、各リストアイテムの@valueを設定できますが、これはもちろんCSSよりも低速です。順序付けられていないリストは自動的に除外されるため、リストアイテムが順序付けられたリスト<ol>に属しているかどうかを確認する必要さえありません。

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>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.