content【コンテンツ】
counter-reset【カウンタ リセット】・counter-increment【カウンタ更新】
counter()【単一カウンタ】・counters()【複数カウンタ】

content【コンテンツ】

メモ

構文 (※記述方法)

プロパティ備考
content:    normal【none と同じ】
| none【疑似要素の生成なし】
| [
         《string【文字列】》
    | 《url【URL】》
    | 《counter【カウンタ】》
    | attr(<identifier>)
    | open-quote【開始引用符】
    | close-quote【終了引用符】
    | no-open-quote【開始引用符 (挿入なし)】
    | no-close-quote【終了引用符 (挿入なし)】
    ]+
content: [
   [
         《image【画像】》
    | 《url【URL】》
   ]
   ','
]*
[
       normal【疑似要素では生成なし】
  | none【疑似要素では生成なし】
  | <content-list【コンテンツリスト】>
]
[/ 《string【文字列】》 ]?
<content-list【コンテンツリスト】> [
       《string【文字列】》
  | contents
  | 《url【URL】》
  | <quote【引用符】>
  | document-url
  | <target>
  | leader()【リーダー】
]+
<quote【引用符】> [
       open-quote【開始引用符】
  | close-quote【終了引用符】
  | no-open-quote【開始引用符 (挿入なし)】
  | no-close-quote【終了引用符 (挿入なし)】
]
<target> [
       target-counter()
  | target-counters()
  | target-text()
]
leader()【リーダー】 leader(
       dotted【点線】
  | solid【実線】
  | space【スペース】
  | 《string【文字列】》
);

<style>
.ex:before { content: open-quote "(前)"; color: red; font-weight: bold; }
.ex:after { content: "(後)" close-quote; color: blue; font-weight: bold; }
</style>

<span class="ex"> コンテンツ </span>

コンテンツ

関連


counter-reset【カウンタ リセット】・counter-increment【カウンタ更新】

メモ

構文 (※記述方法)

プロパティ備考
counter-reset:    [ <identifier【カウンタ識別子】>  《integer【リセット値 (省略:0)】》? ]+
| none【リセットなし】
カウンタのリセット
(リセット値は負数も可)
counter-increment:    [ <identifier【カウンタ識別子】>  《integer【加算値 (省略:1)】》? ]+
| none【更新なし】
カウンタの更新
(加算値は 0 または 負数も可)

counter()【単一カウンタ】使用
<style>
#div1 { counter-reset: header4; }

h4 { counter-reset: header5; }
h4:before {
  content: counter(header4) ":";
counter-increment: header4;
  color: red; }

h5 { counter-reset: header6; }
h5:before {
  content: counter(header4) "-" counter(header5, upper-alpha) ":";
counter-increment: header5;
  color: red;
}

h6:before {
  content: counter(header4) "-" counter(header5, upper-alpha) "-" counter(header6, lower-alpha) ":";
counter-increment: header6;
  color: red;
}
</style>

<div id="div1">(header4 = 0)
  <h4>ヘッダ4 (++header4 / header5 = 0)</h4>
  <h4>ヘッダ4 (++header4 / header5 = 0)</h4>
    <h5>ヘッダ5 (++header5 / header6 = 0)</h5>
  <h4>ヘッダ4 (++header4 / header5 = 0)</h4>
    <h5>ヘッダ5 (++header5 / header6 = 0)</h5>
      <h6>ヘッダ6 (++header6)</h6>
      <h6>ヘッダ6 (++header6)</h6>
    <h5>ヘッダ5 (++header5 / header6 = 0)</h5>
      <h6>ヘッダ6 (++header6)</h6>
      <h6>ヘッダ6 (++header6)</h6>
</div>
(header4 = 0)

ヘッダ4 (++header4 / header5 = 0)

ヘッダ4 (++header4 / header5 = 0)

ヘッダ5 (++header5 / header6 = 0)

ヘッダ4 (++header4 / header5 = 0)

ヘッダ5 (++header5 / header6 = 0)
ヘッダ6 (++header6)
ヘッダ6 (++header6)
ヘッダ5 (++header5 / header6 = 0)
ヘッダ6 (++header6)
ヘッダ6 (++header6)
counters()【複数カウンタ】使用
<style>
/* exB クラスの子孫の ol要素 ( E F【子孫 結合子】 参照) */
.exB ol { counter-reset: item; list-style-type: none; }
/* exB クラスの子孫の li要素 */
.exB li:before { content: counters(item, "-") ":"; counter-increment: item; color: red; }
</style>

<div class="exB">
  <ol>
  <li>項目 ( item[0] = 0 / ++item[0] )
  <li>項目 ( ++item[0] )
  </ol>

  <ol>
  <li>項目 ( item[0] = 0 / ++item[0] )
  <li>項目 ( ++item[0] )
    <ol>
    <li>項目 ( item[1] = 0 / ++item[1] )
    <li>項目 ( ++item[1] )
    </ol>
  <li>項目 ( ++item[0] )
    <ol>
    <li>項目 ( item[1] = 0 / ++item[1] )
      <ol>
      <li>項目 ( item[2] = 0 / ++item[2] )
      <li>項目 ( ++item[2] )
      <li>項目 ( ++item[2] )
      </ol>
    <li>項目 ( ++item[1] )
      <ol>
      <li>項目 ( item[2] = 0 / ++item[2] )
      <li>項目 ( ++item[2] )
      <li>項目 ( ++item[2] )
      </ol>
    </ol>
  </ol>
</div>
  1. 項目 ( item[0] = 0 / ++item[0] )
  2. 項目 ( ++item[0] )
  1. 項目 ( item[0] = 0 / ++item[0] )
  2. 項目 ( ++item[0] )
    1. 項目 ( item[1] = 0 / ++item[1] )
    2. 項目 ( ++item[1] )
  3. 項目 ( ++item[0] )
    1. 項目 ( item[1] = 0 / ++item[1] )
      1. 項目 ( item[2] = 0 / ++item[2] )
      2. 項目 ( ++item[2] )
      3. 項目 ( ++item[2] )
    2. 項目 ( ++item[1] )
      1. 項目 ( item[2] = 0 / ++item[2] )
      2. 項目 ( ++item[2] )
      3. 項目 ( ++item[2] )

関連


counter()【単一カウンタ】・counters()【複数カウンタ】

メモ

  • カウンタの表示で使用
  • counter()【単一カウンタ
    • counter-reset【カウンタ リセット】の要素が入れ子にならない場合に使用
  • counters()【複数カウンタ
    • counter-reset【カウンタ リセット】の要素が入れ子になる場合に使用
    • 入れ子になると新規のカウンタを生成

構文 (※記述方法)

構文備考
counter ( <identifier【カウンタ識別子】>  [, <list-style-type【リストマーカー種類】> ] )

戻り値:指定した【リストマーカー種類】の【カウンタ識別子】カウンタの文字列
単一カウンタ
counters ( <identifier【カウンタ識別子】>,  《string【セパレータ】》  [, <list-style-type【リストマーカー種類】> ] )

戻り値:指定した【リストマーカー種類】の【カウンタ識別子】カウンタを【セパレータ】で区切った文字列
複数カウンタ

関連