ネストされたolに上位リスト番号もCSSで表示

ネストされたol要素に上位リスト番号もCSS2.1で表示する方法です。まるで論文番号の振り方の様です。

HTML記述例

  1. 最上位のol要素にクラスnestを加えるだけです。

    <ol class="nest">
    <li>親リストa<ol><li>子リストa<ol><li>孫リストa</li><li>孫リストb</li><li>孫リストc</li></ol></li></ol></li>
    <li>親リストb</li>
    <li>親リストc<ol><li>子リストb</li></ol></li>
    <li>親リストd<ol><li>子リストc</li><li>子リストd<ol><li>孫リストd</li></ol></li>
    </ol></li>
    <li>親リストe</li>
    </ol>

CSS記述例

  1. IE7以下は非対応なので、中途半端にスタイルが適用されないようにCSSハックで除外しています。

    html>//body .nest,
    html>/
    /body .nest ol{
    counter-reset:nest;
    list-style-type:none;
    padding-left:1em;
    }
    .nest li:before{
    content:counters(nest, ".") ". ";
    counter-increment:nest;
    }

補足事項

  1. サンプルページを作成しました。

    nested-orderd-list.png
  2. ブラウザがOperaだと、2つ目以降の番号表示がおかしくなります。2012年5月4日現在の最新バージョンである11.62でバグを確認しています。

リンク

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(2012年5月現在)。ありがとうございます。