CSS:counter-incrementを使って要素に連番表示するときのサンプルコード

Tips

CSS:counter-incrementを使って要素に連番表示するときのサンプルコード

擬似要素と組み合わせることで該当の要素があったら連番を表示させたりすることができるCSSのcounter-incrementを使った連番表示のサンプルです。

※以下で紹介するものは、いずれもsection要素が複数並んでいるのに対して連番を振り、数字は::before擬似要素を使って表示する想定になります。

単純な連番表示

1 → 2 → 3 → 4 → 5 ... という単純な連番を表示する場合は、CSSを下記のように記述します。

CSS

section {
  counter-increment: section;
}
section::before {
  content: counter(section);
}

0スタートの連番表示

0 → 1 → 2 → 3 → 4 ... というようにスタートを0から始めたい場合は、CSSを下記のように記述します。
動きとしては:nth-of-type()を使ってひとつ目のsection要素にはcounter-resetを指定して0を表示させ、次に:nth-of-type():not()を組み合わせてひとつ目の要素でない(ふたつ目以降の要素)場合はcounter-incrementで値を進めています。

CSS

section:nth-of-type(1) {
  counter-reset: section;
}
section:not(:nth-of-type(1)) {
  counter-increment: section;
}
section::before {
  content: counter(section);
}

ゼロパディングな連番表示

01 → 02 → 03 → 04 → 05 ... のようなゼロパディング(ゼロ埋め)で連番を表示する場合は、counterの指定部分でdecimal-leading-zeroを使って実装でき、CSSを下記のように記述します。

CSS

section {
  counter-increment: section;
}
section::before {
  content: counter(section, decimal-leading-zero);
}

0を複数にした場合の連番表示

上の応用的なもので、例えば 001 → 002 → 003 → 004 → 005 ... のように0をひとつではなく複数表示させたい場合は、CSSを下記のように記述します。

CSS

section {
  counter-increment: section;
}
section::before {
  content: '0' counter(section, decimal-leading-zero);
}
section:nth-of-type(99) ~ section::before {
  content: counter(section, decimal-leading-zero);
}

基本は「ゼロパディングな連番表示」のときと同じようにcontent記述しているcounter()decimal-leading-zeroを使用するのですが、そこへさらに頭に0を追加するように記述します。
こうすることで001や002といった表示にさせることが可能になります。

ただ、これだけだと100以降の表示が0100や0101のように余計な0が付いてしまうので、最後にその対策として頭に0を付けない形でcontentを再度指定します。
指定には間接セレクタを組み合わせており、section:nth-of-type(99) ~ sectionと指定することで100以降の場合のスタイルを指定できます。


上で紹介したコードを用いた実際の表示は下記デモで確認できます。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.