counter-reset

Home>CSS>プロパティリファレンス>counter-repeat

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

counter-resetプロパティの役割

counter-resetプロパティは、contentプロパティにおいてカウントに使用した変数の値を初期化します。

counter-resetプロパティに設定できる値

none 変数の初期化を行わない。
変数名 指定した変数の値を0にする。
変数名 整数値 指定した変数の値を指定した値にする。

counter-resetプロパティの使い方

<style type="text/css">
.count{
counter-increment:count 1;
counter-reset:count2;
}
.count:after{
content:" [" counter(count) "] ";
}
.count2{
counter-increment:count2;
margin-left:20px;
}
.count2:after{
content:" [" counter(count2) "] ";
}
</style>
<p class="count">項目</p>
<p class="count2">項目1の内容</p>
<p class="count2">項目1の内容</p>
<p class="count">項目</p>
<p class="count2">項目2の内容</p>
<p class="count2">項目2の内容</p>

項目

項目1の内容

項目1の内容

項目

項目2の内容

項目2の内容

上のサンプルでは、項目が変わるごとに、内容のカウントがリセットされています。

関連リンク

よく読まれている記事

UpDate:2010-7-29