最初の番号を6にする順序付きリストがあります。これは、HTML 4.01では supported (現在は非推奨)であることがわかりました。この仕様では、CSSを使用して開始整数を指定できると述べています。 (start
属性の代わりに)
CSSで開始番号をどのように指定しますか?
特定の時点で順序付きリスト(OL)を開始する機能が必要な場合は、DoctypeをHTML 5として指定する必要があります。これは:
<!doctype html>
そのDoctypeでは、順序付きリストにstart
属性を設定することが有効です。といった:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
<ol start="">
は HTML5 で非推奨ではなくなったため、HTML4.01の内容に関係なく、使用し続けるだけです。
start="number"
は、その前の番号付けに基づいて自動的に変更されないため、ひどいです。
より複雑なニーズに対応できる別の方法は、counter-reset
とcounter-increment
を使用することです。
問題
次のようなものが必要だとしましょう:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item four
2番目のli
の3番目のol
にstart="3"
を設定できますが、最初のol
にアイテムを追加するたびに変更する必要があります
ソリューション
最初に、現在の番号付けのフォーマットをクリアしましょう。
ol {
list-style: none;
}
各リーにカウンターを表示させます
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}
ここで、各カウンタではなく、最初の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
...
このスレッドで答えが見つからなかったことに驚いています。
このソース を見つけました。これを以下に要約します。
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
私の fiddle をチェックしてください
W3 wikiリファレンス も参照してください
リストがネストされている場合、ネストされたリストアイテムを除外する処理が必要です。これは、グランドペアレントがリストアイテムではないことを確認することで実現しました。
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>
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")とは異なる番号から順序付きリストの番号付けを開始するには、start
属性が必要です。この属性は HTML 4.01仕様 (この質問が投稿された時点ではまだHTML 4.01は「置き換えられた仕様」ではなかった)で許可され(非推奨ではありません)、現在の HTML 5.2仕様 。 ol
要素には、 XHTML 1.0の移行DTD にオプションのstart
属性もありましたが、 XHTML 1.0の厳密なDTD (文字列ATTLIST ol
を検索し、属性リストを確認してください)。したがって、いくつかの古いコメントにあるように、start
属性はdeprecatedではありませんでした。むしろ、HTML 4.01およびXHTML 1.0の厳密なDTDではinvalidでした。コメントの1つが主張していることにもかかわらず、start
属性はul
要素で許可されておらず、現在FirefoxおよびChromiumでは機能しません。
また、千単位の区切り記号は機能しません(FirefoxとChromiumの現在のバージョンでは)。次のコードスニペットでは、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:スタイルから(およびコンテンツ)に移行していますか? WebAIMブログ(2017年8月)のJohn Northupによる。