CSS counter-set 属性

定義と使用方法

counter-set 属性は CSS カウンタを特定の値に設定し作成するために使用されます。

counter-set 属性は通常 counter-increment 属性と content 属性と一緒に使用されます。

例

例 1

カウンタ（"my-counter"）を作成し、それを 5 に設定し、<h2> セレクタが表示されるたびにその値を 1 増やします：

body {
  /* "my-counter" を 5 に設定する */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" を 1 増やします */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

自分で試してみてください

例 2

カウンタ（"my-counter"）を作成し、それを 5 に設定し、<h2> セレクタが表示されるたびにその値を 1 減らします：

body {
  /* "my-counter" を 5 に設定する */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" を 1 減らす */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

自分で試してみてください

例 3

章とサブ章の番号として "Section 10:"、"10.1"、"10.2" などの形式を使用します：

body {
  /* "section" を 9 に設定する */
  counter-set: section 9;
}
h1 {
  /* "subsection" を 0 に設定します */
  counter-set: subsection 0;
}
h1::before {
  /* "section" を 1 増やします */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* "subsection" を 1 増やします */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

自分で試してみてください

例 4

カウンタを作成し、それを 9 に設定し、<h2>選択子が現れるたびに 1 を増やし（ローマ数字を使用）：

body {
  /* "my-counter" を 9 に設定します */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter" を 1 増やします */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

自分で試してみてください

CSS 语法

counter-set: none|counter-name number|initial|inherit;

属性値

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参照：::before 仮要素

参照：::after 仮要素

参照：CSS content 属性

参照：CSS counter-increment 属性

参照：CSS counter() 関数