counter-reset

counter-incrementプロパティで指定した変数を初期化します。


ブラウザ

O6 / O7 / O9

▲PageTop

書式

要素[.class名][#id名]{ counter-reset : 変数名 初期化値; }
初期化したい変数が複数ある場合はcounter-resetの部分を以下のように記述します。 
要素[.class名][#id名]{ counter-reset : 変数名a 初期化値a 変数名b 初期化値b ...;

▲PageTop

指定できる値

値 初期値 意味
変数名 + 初期化値 指定した変数を初期化値に初期化します。
none ○ 変数の初期化を行いません。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1:after{
        content : " カウント=" counter(cnt);
        counter-increment : cnt;
      }
      #sample2:after{
        content : " カウント=" counter(cnt);
        counter-increment : none;
        counter-reset : cnt 10;
      }
      #sample3:after{
        content : " カウント=" counter(cnt);
        counter-increment : cnt -1;
      }
    </style>
    </head>
    <body>
      <p>■値を1づつカウントします。</p>
      <p id="sample1">結果</p>
      <p id="sample1">結果</p>
      <p id="sample1">結果</p>
      <p>■値を10に初期化して、カウントさせません。</p>
      <p id="sample2">結果</p>
      <p id="sample2">結果</p>
      <p id="sample2">結果</p>
      <p>■値を-1づつカウントします。</p>
      <p id="sample3">結果</p>
      <p id="sample3">結果</p>
      <p id="sample3">結果</p>
    </body>
</html>

表示結果

■値を1づつカウントします。

結果

結果

結果

■値を10に初期化して、カウントさせません。

結果

結果

結果

■値を-1づつカウントします。

結果

結果

結果

▲PageTop

関連項目

CSS

after / before / content / counter-increment

▲PageTop

▲