CSS3: counter-increment プロパティ - カウンタの値の更新

■ 概要

項　　目説　　明
記述形式 セレクタ {counter-increment: 値 }
値 の形式
  1. none
  2. カウンタ　［増分値］
  3. カウンタ1　［増分値1］ ・・・ カウンタn　［増分値n］
初 期 値 none
対応ブラウザー C2+ / e8+ / N?+ / Fx1+ / Op4+ / Ch1+ / Sa1+
適用可能な要素 すべての要素，::before擬似要素，::after擬似要素，::alternate擬似要素，
::marker擬似要素，::line-marker擬似要素，余白領域，@footnote 領域
継　　承 しない

■ 解説

counter-increment プロパティ は，カウンタの値の更新 を指定します。

複数の カウンタ を指定して，同時に更新することもできます。

指定できる値の形式は，以下のとおりです。

値説　　明
none カウンタの更新を指定しません。　（初期値）
カウンタ 更新の対象とするカウンタの カウンタID を指定します。
カウンタ1 ～ カウンタn も同様です。
増分値 （カウンタ を ID とするカウンタの） 増分値 を指定します。
0 や負の値も指定可能です。　省略すると 1 になります。
増分値n ～ 増分値n も同様です。

■ 使用例（ counter-increment プロパティの利用）

次の例は，番号付きのリスト（箇条書き）を <ol> 要素 を用いて書く際に， 各 <li>要素 の先頭の番号に "( )" や "[ ]" をつけるものです。　::before 擬似要素 を使います。

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
   <!--
      ol.parenth { counter-reset: itemp;  }
      ol.parenth > li { display: block; }
      ol.parenth > li::before { 
         content:"(" counter(itemp) ") "; 
         counter-increment: itemp; 
      }
      ol.bracket { counter-reset: itemb;  }
      ol.bracket > li { display: block; }
      ol.bracket > li::before { 
         content:"[" counter(itemb) "] ";
         counter-increment: itemb; 
      }
   -->
</style>
HTML
<body> ～ </body>		 
  <ol class="bracket">
     <li>表示テスト（１項目目）
     <ol class="parenth">
        <li>表示テスト（１－１項目目）
        <li>表示テスト（１－２項目目）
        <li>表示テスト（１－３項目目）
     </ol>
     <li>表示テスト（２項目目）
     <ol class="parenth">
        <li>表示テスト（２－１項目目）
        <li>表示テスト（２－２項目目）
     </ol>
  </ol>

ブラウザー 表示例
  1. 表示テスト（１項目目）
    1. 表示テスト（１－１項目目）
    2. 表示テスト（１－２項目目）
    3. 表示テスト（１－３項目目）
  2. 表示テスト（２項目目）
    1. 表示テスト（２－１項目目）
    2. 表示テスト（２－２項目目）

<ol class="parenth"> 要素が現れる度に，カウンタ: itemp の値がリセットされ，また， <ol class="parenth"> の子要素の <li>要素 が現れる度に， カウンタ: itemp の値が 1 増加します。　<ol class="bracket"> についても同様で， カウンタ: itemb の値をリセット＆更新します。

この例の詳細な解説は，擬似要素 から 子供結合子（子供セレクタ） までを参照してください。

■ 備考

【参考ページ】