CSSで見出しに連番を付ける(1つ目は除く)

  • 14
    Like
  • 0
    Comment
More than 1 year has passed since last update.
h2 {
    counter-increment: hn;
}
h2:before {
    content: counter(hn)". ";
}

/* 1つ目を除く */
h2:nth-of-type(1) {
    counter-increment: none;
}
h2:nth-of-type(1):before {
    content: '';
}
<h2>もくじ</h2>
<ol>
    <li>見出し1</li>
    <li>見出し2</li>
    <li>見出し3</li>
    <li>見出し4</li>
</ol>

<h2>見出し1</h2>
<h2>見出し2</h2>
<h2>見出し3</h2>
<h2>見出し4</h2>

デモ

雑感

今さら感全開ですが、もくじ(最初の見出し)除くというのは CMS がからむ案件で割と使いそうかな、と思ったのでスニペット化しておきました。

最初の1つ目みたいなルールがなく、特定の見出しに連番をふりたくない場合は、:nth-of-type(1) をクラス指定に変えればOK。

あと、CODEPEN をちょっと触ってみたかったというのも大きいです。クロスブラウザチェックできるとかなにこれすごい。以上、ご確認よろしくお願いいたします。