要素の連番の値をリセットするcounter-resetプロパティ
counter-reset

 counter-resetは要素の連番の値をリセットする場合に使います。

 適用された要素が現れるたびに、指定した名前のカウンタの値が0にリセットされます。

基本データ

構文 セレクタ{counter-reset: 値;}
継承 ×
none
[カウンタ名]
[カウンタ名 整数値]
親から継承させる場合
inherit
効果 counter-resetプロパティが指定した名前のカウンタが0にリセットされる
初期値 none
適用個所 すべての要素

例:

ほげほげ

ほげほげ

ほげほげ

p.hogehoge:before {
content: "項目 " counter(chapter) ". ";
counter-increment: chapter;
counter-reset: section;
}

動作Webブラウザ

Internet Explorer IE 8以上
Firefox Firefox 1以上
Safari Safari 3.1以上
Opera Opera 9.2以上
Chrome Chrome 2以上
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("ID属性値").style.counterReset

jQueryを使った参照方法

$('【セレクタ】').css('counter-reset','【値】');
$('【セレクタ】').css({'counter-reset':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH