LoginSignup
13
12

More than 5 years have passed since last update.

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

Posted at
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 をちょっと触ってみたかったというのも大きいです。クロスブラウザチェックできるとかなにこれすごい。以上、ご確認よろしくお願いいたします。

13
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
12