[css: counter] Count DOM element by CSS2 feature. - #css - Cacher Snippet

9/3/2017 - 1:20 PM

[css: counter] Count DOM element by CSS2 feature. - #css

[css: counter] Count DOM element by CSS2 feature. - #css

Rendered
Source

CSS カウンタ？

CSS2 から実装された 要素の出現数をカウントする 機能。

本来的には文章構造において、「第1章」「第2章」「第3章」のような見出しナンバリングやリストのカウント（「１．１」「１．２」「１．３」的な）に用いる。

どんなふうに使うの？

| プロパティ | 値 | 概要 | | countercounter-reset | 識別子数字 number 0; | カウント値の初期化を行う ※必須 (Default: 0) | | counter-increment | 識別子増加数 number 1; | カウントの増加数を設定 (Default: 0) | | * | counter(number) | カウンタ呼び出し |

body {
  counter-reset: number 0; // number カウント変数 をセットするみたいな感じ
}

h2:before {
  counter-increment: number 1; // number カウント変数 を 1 ずつ増加しまっせ
  content: counter(number);    // number カウント変数 を呼び出しまっせ...的な？
}

Hidden 要素をスキップしてカウントする仕様

この CSSカウンタは hidden 属性つき要素や display: none; な要素など 隠し要素をスキップしてカウントする という仕様があり、これは CSS2, CSS3 ともに変更されていない。