CSS3 Pre-Reference



counter-increment

カウンター増減

試す

コード

div::before {
  content: "Chapter " counter(chapter) ". ";
  counter-increment: chapter;
  counter-reset: section;
}
p::before {
  content: counter(chapter) "." counter(section) " ";
  counter-increment: section;
}

サンプル

青い段落の前に「Chapter 1.」、「Chapter 2.」、緑の段落の前に「1.1」「1.2」「2.1」「2.2」と表示されていれば、すべて対応しています。

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。

到底(あと)ってしまった。

これは減る、しばらくしているがない。

これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。

しかもあとって行くと。

その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
1.5~
Chrome/Safari
Opera
4.0~
InternetExplorer
8.0~

パラメータ

[ <識別子> <整数値>? ]+ | none
初期値 none
適用 すべての要素、::before、::after、::alternate、::marker、::line-marker疑似要素、マージン領域、脚注領域
継承 しない
レベル 2-
%の解釈 -
適用メディア All
参考文献 CSS3 Generated and Replaced Content Module#8. Automatic counters and numbering: the 'counter-increment' and 'counter-reset' properties

解説

識別子にある名前のカウンタを1増やします。後ろに整数値が続く場合は、その整数値分、カウンタを増やします。

複数のカウンタを増やしたい場合は、以下のように記述します。 
h1 { counter-increment: section -1 imagenum 3 }
以下のように記述すると、 
h1 { counter-increment: section -1 }
h1 { counter-increment: imagenum 3 }

カスケード処理されて、前の宣言("counter-increment: section -1")が無視されてしまいます。

また、カウンタは初期化した後に増減させる事になっていますので、'counter-increment'、'counter-reset'の順が逆になっても、値は変化しません。

カウンタについて詳細は、カウンタの項をご覧ください。

"display: none"と同時に指定すると無効になります(カウンタは増加しません)。対して、"visibility: hidden"と同時に指定しても無効になりません。

トラックバック

投稿されたコメント