counter-incrementプロパティ(C2- ie8-)で参照した
カウンタが、counter-resetプロパティ(C2- ie8-)の作用範囲にない場合、その
カウンタはルート要素
(*1)で「0」に初期化されます。
*1 CSS2におけるルート要素とは、親要素を持たない要素のことをあらわしますが、ここでいうルート要素とは、「counter-reset」の作用範囲外の要素だと考えられます。
以下に自動番号振りと共に
contentプロパティの「counter()」関数を指定したサンプルを示します。
h1:before {
content: "第" counter(chapter) "章 ";
counter-increment: chapter;
counter-reset: section;
}
h2:before {
content: "第" counter(chapter) "章 第" counter(section) "節 ";
counter-increment: section;
}
このように指定されたカウンタは、ブラウザが対応していれば以下のように表示されます。
第1章 content 1
第1章 第1節 foundation #1
第1章 第2節 foundation #2
第2章 content 2
counter-resetプロパティは、通常の
カスケード処理に従います。したがって次の記述は
h1:before {counter-reset:gap -1}
h1:before {counter-reset:uniqlo 99}
カウンタ名「uniquro」だけの初期化を行ってしまいます。両者を初期化するにはまとめて指定します。
h1:before {counter-reset: gap -1 uniqlo 99}
カウンタは自身をネスト(入れ子)にして指定することができます。
次のような指定で
HTMLの
li要素のような番号を振ることができます。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
このように指定されたカウンタは、ブラウザが対応していれば以下のように表示されます。
1. content 1
1. foundation #1
2. foundation #2
2. content 2
「counters()」関数を用いると、「1.1.1」「1.1.2」のような番号を振ることができます。
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
このように指定されたカウンタは、ブラウザが対応していれば以下のように表示されます。
1 content 1
1.1 foundation #1
1.2 foundation #2
2 content 2
「counter(
識別子 表示形式)」「counters(
識別子 表示形式)」関数における表示形式には、
list-style-typeプロパティで指定できる値を指定することができます。
表示されない要素におけるカウンタの扱い関して、「
display: none」の要素では増加と初期化は行えませんが、「
visibility:hidden」の要素では増加と初期化を行うことができます。
