LINEで現役エンジニアに直接質問してみよう!登録無料

counter-incrementで入れ子リストを連番化する方法

CSSのcounter-incrementを使うと、連番を使うことが出来ます。HTMLやJavascriptがなくてもCSS1つでデザイン出来てとても便利なのですが、下記のように入れ子構造になった場合、子要素までも含めての連番になります。

この場合は、下記のように子要素だけを別の連番として分けたいですよね。今回はその方法を紹介します。

counter-incrementのおさらい

counter-incrementとは、カウンタなど数値を一定の規則でカウントすることができるCSSプロパティでしたね。

counter-increment: 変数とすると、変数に入った値がcounter-incrementの付いている要素を繰り返し表示するごとにカウントアップ(カウントダウン)します。

ですので、下記のように何回も登場するliに対してcounter-increment: number;を付けカウントアップし、li::beforeで利用しているというわけです。

ul li {
  counter-increment: number;
}
ul li::before {
  content: "No. "counter(number);
}
<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

入れ子リストを連番化した時に子要素でもカウントアップしてしまう

しかし、このままだと下記のように入れ子構造でカウンタを使いたい時、子要素を含めてカウントアップしてしまいます。できれば、子要素は別でカウントアップしたいですよね?

ul li {
  counter-increment: number;
}
ul li::before {
  content: "No. "counter(number);
}
<ul>
  <li>テキスト</li>
  <li>
    テキスト
    <ul>
      <li>テキスト</li>
      <li>テキスト</li>
    </ul>
  </li>
  <li>テキスト</li>
</ul>

そのような時に使うのが、counter-reset: number;です。使い方は、カウンタをリセットしたい要素ごとのまとまりを意識して使う事です。この場合は、ulが登場した毎にカウンタをリセットしたいのでul { counter-reset: number; }を使っています。

ul li {
  counter-increment: number;
}
ul li::before {
  content: "No. "counter(number);
}
ul { counter-reset: number; }
<ul>
  <li>テキスト</li>
  <li>
    テキスト
    <ul>
      <li>テキスト</li>
      <li>テキスト</li>
    </ul>
  </li>
  <li>テキスト</li>
</ul>

まとめ

  • カウンタをリセットしたい場合はcounter-reset: number;をリセットしたいまとまりごとの要素に適用する

以上、counter-incrementで入れ子リストを連番化する方法をアキ(@hackablejp)が解説しました!

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。