CSS counter-increment 属性

定義と使用法

counter-increment属性は、選択されたセレクタが一度でも出現するたびにカウンタの増分を設定します。デフォルトの増分は1です。

説明

この属性を使用すると、カウンタが値を増加（または減少）させることができます。増加または減少する値は正の値または負の値です。number値が提供されない場合、デフォルトで1です。

注：「display: none」を使用している場合、カウントは増加しません。一方、「visibility: hidden」を使用している場合、カウントは増加します。

も参照してください：

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

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

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

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

CSS 関数：counter() 関数

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

例

部分と子部分に番号を付け（例：「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-increment: none;id|initial|inherit;

属性値

値 説明
none デフォルト。選択子にはカウント増分がありません。
id number

id カウントを増加させる選択子、id、または class を定義します。

number 増分を定義します。number は正数、零、または負数でなければなりません。
inherit counter-increment 属性の値を親要素から継承することを指定します。

技術的詳細

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

ブラウザのサポート

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

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

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