CSS3: counter-reset プロパティ - カウンタの値のリセット

■ 概要

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

■ 解説

counter-reset プロパティ は,カウンタの値のリセット を指定します。

複数の カウンタ を指定して,同時にリセットすることもできます。

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

説  明
none カウンタのリセットを指定しません。 (初期値)
カウンタ リセットの対象とするカウンタの カウンタID を指定します。
カウンタ1カウンタn も同様です。
リセット値 カウンタ を ID とするカウンタの) リセット値 を指定します。
0 や負の値も指定可能です。 省略すると 0 になります。
リセット値nリセット値n も同様です。

■ 使用例( counter-reset プロパティの利用)

次の例は,番号付きのリスト(箇条書き)を <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>表示テスト(1項目目)
     <ol class="parenth">
        <li>表示テスト(1-1項目目)
        <li>表示テスト(1-2項目目)
        <li>表示テスト(1-3項目目)
     </ol>
     <li>表示テスト(2項目目)
     <ol class="parenth">
        <li>表示テスト(2-1項目目)
        <li>表示テスト(2-2項目目)
     </ol>
  </ol>

ブラウザー 表示例
  1. 表示テスト(1項目目)
    1. 表示テスト(1-1項目目)
    2. 表示テスト(1-2項目目)
    3. 表示テスト(1-3項目目)
  2. 表示テスト(2項目目)
    1. 表示テスト(2-1項目目)
    2. 表示テスト(2-2項目目)

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

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

■ 備考

【参考ページ】