ol要素の子孫要素へ親の番号を引き継いでのナンバリング

ol要素の子孫要素へ親の番号を引き継いでのナンバリングを行うには、次のような方法で可能です。

  • ※ IEは7以下で非対応です。
  1. テキスト
    1. テキスト
    2. テキスト
    3. テキスト
  2. テキスト
    1. テキスト
    2. テキスト
    3. テキスト
      1. テキスト
      2. テキスト
      3. テキスト
      4. テキスト
  3. テキスト

HTML

CSS

counter-resetプロパティはカウントをセットする変数と初期値を設定します。
counter-reset:変数名 初期値;のように指定しますが、初期値の設定を省略した場合は、初期値が0となります。
変数は子孫要素に対して同じ名前で準備することができます。
子孫要素で同じ名前でリセット(counter-reset)するまで、その間の要素で使用ことができます。

counter-incrementプロパティはカウントを増やす変数と増加数を指定します。
counter-reset:変数名 増加数;のように指定しますが、増加数の設定を省略した場合は、初期値が1となります。

counters関数は、対象の変数すべてを与えられた順番に連結して出力します。