RyoSugimoto
10/14/2014 - 4:55 AM

ol 要素のカウンターを途中から始める。

ol 要素のカウンターを途中から始める。

ol_counter.md
content_copyfile_download
  • Rendered
  • Source

解説

知られざる Ordered List 関連のプロパティ

counter-reset: [カウンタID] [number];

セレクタの要素が登場するたびに、[カウンタID]で定義したカウンタが[number]の値にリセットされる。[カウンタID]には任意の文字列が使える。[カウンタID]は、counter-reset でリセットするカウンタを指定するときの識別子として、あるいは以下で紹介するように、他の場所やプロパティからそのカウンタを参照する際に必要である。

content: counter( [カウンタID] );

:before や :after 擬似要素に対して使用する。セレクタの要素が登場する度に[カウンタID]の示すカウンタの値を表示する。

counter-increment: [カウンタID] [number];

セレクタの要素が登場する度に、[カウンタID]の示すカウンタの値を1つずつ加算する。[number]がある場合は、その数を加算する。

ol_counter.css
content_copyfile_download
ol {
	counter-reset: item 2;
}

li:before {
	content: counter(item)".";
	counter-increment: item;
}