CSS counter-reset 属性

定義と用法

counter-reset属性は、特定のセレクタが現れる回数のカウンタの値を設定します。デフォルトは0です。

この属性を使うと、カウンタを任意の値に設定またはリセットできます。正の値または負の値ができます。numberが提供されない場合、デフォルトで0です。

注記：「display: none」を使用すると、カウンタをリセットできません。一方、「visibility: hidden」を使用すると、カウンタをリセットできます。

参照してください：

CSS リファレンスマニュアル：CSS :before 仮要素

CSS リファレンスマニュアル：CSS :after 仮要素

CSS リファレンスマニュアル：content 属性

CSS リファレンスマニュアル：counter-increment 属性

CSS 関数：counter() 関数

HTML DOM リファレンスマニュアル：counterReset 属性

例

部分と子部分に番号を付け（例えば「Section 1」、「1.1」、「1.2」）する方法：

body
  {
  counter-reset:section;
  }
h1
  {
  counter-reset:subsection;
  }
h1:before
  {
  content:"Section " counter(section) ". ";
  counter-increment:section;
  }
h2:before
  {
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) ";
  }

自分で試してみる

CSS 语法

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

属性値

値 説明
none デフォルト。選択子のカウンタをリセットすることはできません。
id number

id カウンタをリセットする選択子、id、またはclassを定義します。

number この選択子が現れる回数のカウンタの値を設定できます。それは正の数、零、または負の数でできます。
inherit counter-reset 属性の値を親要素から継承するべきであることを指定します。

技術的詳細

デフォルト値： none
継承性： no
バージョン： CSS2
JavaScript 语法： object.style.counterReset="subsection"

ブラウザのサポート

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

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 2.0 3.1 9.6

注記：DOCTYPE が指定されている場合、Internet Explorer 8（およびそれ以降のバージョン）は counter-reset 属性をサポートしています。