「counter-increment」は、カウンタの値の更新を指定します。
「content」のcounter()、counters()にカウンタ名を指定することで、要素の前または後にカウンタの値が挿入されます。
CSS Ver. | 適用要素 | 継承 |
---|---|---|
2.1 | 全て | しない |
構文 | |
---|---|
counter-increment : [カウンタ名 値] | none ; |
|
プロパティ/設定値 | 意味 |
counter-increment : none; | カウンタを更新しない。(初期値) |
counter-increment : カウンタ名 値; |
カウンタ名と増分値を半角スペースで区切って指定。 カウンタ名は、必ず指定する。 カウンタ名は、半角スペースで区切って複数指定も可能。 増分値を指定しない場合は、増分は1になります。 値に負の値を指定し、カウンタを戻すことも可能。 |
デフォルト:「タグ毎のスタイル初期値」を参照 |
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
dl{ counter-reset:cnt cnts; }
.css_counter-increment1 dd::before {
counter-increment:cnt;
content : counter(cnt) "行目." ;}
.css_counter-increment2 dd::before {
counter-increment:cnts 5;
content : counters(cnts,"-")"." ;}
</style>
<!-- html -->
<div class="common">
<div class="cssTitle">counter-increment:cnt</div>
<div>
<dl class="css_counter-increment1">
<dt>カウンタの増分1。</dt>
<dd>①</dd>
<dd>②</dd>
<dd>③</dd>
</dl>
</div>
<div class="cssTitle">counter-increment:cnts 5</div>
<div>
<dl class="css_counter-increment2">
<dt>カウンタの増分5。:1階層目</dt>
<dd>①</dd>
<dd>②</dd>
<dd>③
<dl>
<dt>カウンタの増分5。:2階層目</dt>
<dd>③の1</dd>
<dd>③の2
<dl>
<dt>カウンタの増分5。:3階層目</dt>
<dd>③の2の1</dd>
</dl></dd>
</dl></dd>
</dl>
</div>
</div>
関連するCSS(STYLE) | |
---|---|
content | コンテンツの挿入・置換 |
counter-reset | カウンターの初期値 |