Skip to content

Instantly share code, notes, and snippets.

@RyoSugimoto
Created October 14, 2014 04:55
Show Gist options
  • Save RyoSugimoto/116af279ecab3ecfefd9 to your computer and use it in GitHub Desktop.
Save RyoSugimoto/116af279ecab3ecfefd9 to your computer and use it in GitHub Desktop.
ol 要素のカウンターを途中から始める。
ol {
counter-reset: item 2;
}
li:before {
content: counter(item)".";
counter-increment: item;
}

解説

知られざる 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]がある場合は、その数を加算する。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment