適用した要素が現れるごとにカウンタを増やすcounter-incrementプロパティ
counter-increment

　counter-incrementプロパティは、適用した要素が現れるごとにカウンタを増やしていきます。

　:before疑似要素や、:after疑似要素と併せて適用することで、カウンタの値を要素に挿入できます。

基本データ

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

例：

  • ほげほげ
  • ほげほげ
  • ほげほげ
li {
counter-increment:num;
}
li:before {
content:counter(num) "番目　";
}

<ul>
<li>ほげほげ</li>
<li>ほげほげ</li>
<li>ほげほげ</li>
</ul>

動作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-increment','【値】');
$('【セレクタ】').css({'counter-increment':'【値】'});

CSSリファレンス インデックス

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




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

注目のテーマ

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

本日 月間
＠IT