HTMLの順序リスト（ol）に深さに応じて連番を付けるCSS例

HTMLのolとliのリストタグに対して、以下のような本の目次のような連番を打ちたかったとします。

僕は以前これを実装する方法として、やたら長いコードを書いていました。

それが以下。

counter()を用いた方法

僕はこれまでCSSで開発者が独自に番号を指定するには、counter()関数しかないと思って、以下のような長ったらしいコードを書いていました。

/************************************
** 連番を振る
************************************/
.wrap-css-selector ol {
  list-style: none;
}
.wrap-css-selector ol li:before {
  margin-right: 6px;
}
.wrap-css-selector ol > li {
  counter-increment: c-h2;
  counter-reset: c-h3;
}
.wrap-css-selector ol > li:before {
  content: counter(c-h2) ".";
}
.wrap-css-selector ol > li > ol > li {
  counter-increment: c-h3;
  counter-reset: c-h4;
}
.wrap-css-selector ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) ".";
}
.wrap-css-selector ol > li > ol > li > ol > li {
  counter-increment: c-h4;
  counter-reset: c-h5;
}
.wrap-css-selector ol > li > ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) "." counter(c-h4) ".";
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li {
  counter-increment: c-h5;
  counter-reset: c-h6;
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) "." counter(c-h4) "." counter(c-h5) ".";
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li > ol > li {
  counter-increment: c-h6;
}
.wrap-css-selector ol > li > ol > li > ol > li > ol > li > ol > li:before {
  content: counter(c-h2) "." counter(c-h3) "." counter(c-h4) "." counter(c-h5) "." counter(c-h6) ".";
}

我ながら、無駄が多いコードだと思います。

けど、上記のようなh2～h6まで深さを表す連番割り振るにしても、もっとスマートな方法がありました。

counters()を用いた方法

それが、counters()関数を用いた方法です。

counters()関数を用いると、以下のようにたったこれだけのコードで書くことが可能です。

.wrap-css-selector ol {
  list-style: none;
  counter-reset: toc;
}
.wrap-css-selector ol li:before {
  margin-right: 6px;
  counter-increment: toc;
  content: counters(toc,".") ".";
}

方が断然スマートですね。美しいです。

この方法は、CocoonフォーラムにてものぐさWEBノートを運営されている草村さんに教えていただきました。