counters()

counter()CSS の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 counters() 関数には counters(name, string)counters(name, string, style) の二つの形式があります。一般的には擬似要素と一緒に使用されますが、理論的には <string> 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で decimal で表示されます。

/* 単純な使用法 - スタイルは既定で decimal */
counters(countername, '-');

/* カウンターの表示の変更 */
counters(countername, '.', upper-roman)

カウンター自身には視覚的効果が何もありません。 counters() 関数 (および counter() 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

注: counters() 関数は CSS プロパティとも併用できますが、 content 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

構文

<custom-ident>
カウンターを識別する名前であり、 counter-reset および counter-increment に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
<counter-style>
カウンタースタイル名または symbols() 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。
<string>
任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば \000A9 は著作権記号を表します。

形式文法

counters( <custom-ident>, <string>, <counter-style>? )

where
<counter-style> = <counter-style-name> | symbols()

where
<counter-style-name> = <custom-ident>

既定値と upper-roman との比較

HTML

<ol>
  <li>
     <ol> 
        <li></li>
        <li></li>
        <li></li> 
      </ol>
  </li>
  <li></li>
  <li></li>
  <li>
     <ol> 
        <li></li>
        <li>
           <ol> 
              <li></li>
              <li></li>
              <li></li> 
           </ol>
        </li>
      </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
   content:  counters(listCounter, '.', upper-roman) ') ';
}
li::before {
  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
}

結果

decimal-leading-zero と lower-alpha との比較

HTML

<ol>
  <li>
     <ol> 
        <li></li>
        <li></li>
        <li></li> 
      </ol>
  </li>
  <li></li>
  <li></li>
  <li>
     <ol> 
        <li></li>
        <li>
           <ol> 
              <li></li>
              <li></li>
              <li></li> 
           </ol>
        </li>
      </ol>
  </li>
</ol>

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
   content: counters(count, '.', upper-alpha) ') '; 
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}

結果

仕様書

仕様書 状態 備考
CSS Lists Module Level 3
CSS Counters の定義
草案 変更なし
CSS Level 2 (Revision 1)
CSS Counters の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
counters()Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 8Opera 完全対応 10Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報