cssで連番を表示する

LastModified
Category CSS

概要

cssで連番を表示する

基本


#example {
  /* 'number' という名称は任意に変更可能 */
  counter-increment: number;
}
#example::before {
  /* 表示 */
  content: counter(number);
}

シンプルに表示する

pタグが出現するたびに数字が加算され表示される。

AAAA

BBBB

CCCC


<div id="sequence01">
    <p>AAAA</p>
    <p>BBBB</p>
    <p>CCCC</p>
</div>

#sequence01 p {
  counter-increment: sequence01;
}
#sequence01 p::before {
  content: counter(sequence01);
}

加算する数字を変える

AAAA

BBBB

CCCC


<div id="sequence02">
    <p>AAAA</p>
    <p>BBBB</p>
    <p>CCCC</p>
</div>

#sequence02 p {
  /* 5ずつ増やす */
  counter-increment: sequence02 5;
}
#sequence02 p::before {
  content: counter(sequence02);
}

数字をリセットする

AAAA

BBBB

CCCC

DDDD


<div id="sequence03">
    <p>AAAA</p>
    <p>BBBB</p>
    <p class="reset">CCCC</p>
    <p>DDDD</p>
</div>

#sequence03 p {
  counter-increment: sequence03;
}
#sequence03 p::before {
  content: counter(sequence03);
}
#sequence03 p.reset {
  /* クラスreset の場合はカウントをリセット */
  counter-reset: sequence03;
}

入れ子

  • AAAA
  • BBBB
  • CCCC
    • EEEE
    • FFFF
    • GGGG
    • HHHH
  • DDDD

<div id="sequence04">
<ul>
    <li>AAAA</li>
    <li>BBBB</li>
    <li>CCCC
        <ul>
            <li>EEEE</li>
            <li>FFFF</li>
            <li>GGGG</li>
            <li>HHHH</li>
        </ul>
    </li>
    <li>DDDD</li>
</ul>
</div>

#sequence04 ul {
  counter-reset: sequence04;
}
#sequence04 ul li {
  counter-increment: sequence04;
}
#sequence04 ul li::before {
  content: counters(sequence04, ".") " ";
}

使用例

FAQ

質問内容 AAAA
回答内容 AAAA
質問内容 BBBB
回答内容 BBBB
質問内容 CCCC
回答内容 CCCC

<div id="sequence05">
<dl>
    <dt>質問内容 AAAA</dt>
    <dd>回答内容 AAAA</dd>
    <dt>質問内容 BBBB</dt>
    <dd>回答内容 BBBB</dd>
    <dt>質問内容 CCCC</dt>
    <dd>回答内容 CCCC</dd>
</dl>
</div>

#sequence05 dl {
  counter-reset: sequence05;
}
#sequence05 dl dt {
  counter-increment: sequence05;
}
#sequence05 dl dt::before {
  content: "Q" counter(sequence05) ".";
}
#sequence05 dl dd::before {
  content: "A" counter(sequence05) ".";
}