1. Qiita
  2. 投稿
  3. CSS

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

  • 14
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。
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 をちょっと触ってみたかったというのも大きいです。クロスブラウザチェックできるとかなにこれすごい。以上、ご確認よろしくお願いいたします。