counters()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
counters() は CSS の関数により、カウンターが入れ子になっている場合にマーカーを組み合わせることができます。この関数は、指定された文字列と、存在する場合は名前付きで入れ子になったカウンターの現在の値を連結した文字列を返します。 3 番目はオプションの引数で、リストのスタイルを定義することができます。
counter() 関数は、ふつうは擬似要素の中の content で用いることが多いものの、理論的には <string> に対応するすべての箇所で用いることができます。
counters() 関数には counters(<name>, <string>) と counters(<name>, <string>, <style>) の 2 つの形があります。生成されるテキストは、 <name> で指定された名前のすべてのカウンターの値を、最も外側から内側に向けて並べ、指定された <string> で区切ったものです。カウンターは指定された <style> でレンダリングされ、<style> が指定されていない場合は decimal が既定値となります。
試してみましょう
ol { counter-reset: index; list-style-type: none; } li::before { counter-increment: index; content: counters(index, ".", decimal) " "; } <ol> <li>Mars</li> <li> Saturn <ol> <li>Mimas</li> <li>Enceladus</li> <li> <ol> <li>Voyager</li> <li>Cassini</li> </ol> </li> <li>Tethys</li> </ol> </li> <li> Uranus <ol> <li>Titania</li> </ol> </li> </ol> 構文
値
counters() 関数は 2 つまたは 3 つの引数を受け付けます。最初の引数は <counter-name> です。 2 番目の引数は接続する <string> です。 3 番目の引数はオプションで、 <counter-style> です。
<counter-name>-
カウンターを識別する
<custom-ident>であり、counter-resetおよびcounter-incrementに用いた名前と同じもので、大文字小文字を区別します。カウンター名は名前をダッシュ 2 つで始めることはできず、またnone,unset,initial,inheritという名前にすることはできません。また、インラインの単一利用のカウンターでは、symbols()関数を名前付きカウンターの代わりに利用することができます（symbols()に対応しているブラウザーの場合）。 <string>-
任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば
\000A9は著作権記号を表します。 <counter-style>-
カウンタースタイル名または
symbols()関数です。カウンタースタイル名にはnumeric,alphabetic,symbolicなどの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定でdecimalになります。
返値は、その要素の <counter-name> という名前の CSS カウンターセット内にあるすべてのカウンターの値を、 <counter-style> で定義されたカウンタースタイル（省略した場合は decimal）で含む文字列です。返される文字列は、最も外側から内側に向けて並べ、指定された <string> で区切ったものです。
メモ: 結合前のカウンターについての情報は、 counter() 関数を参照してください。こちらは <string> を引数として取りません。
形式文法
<counters()> =
counters( <counter-name> , <string> , <counter-style>? )
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
既定のカウンター値と大文字のローマ数字との比較
この例には、 2 種類の counters() 関数が含まれます。 1 つは <counter-style> を設定しており、もう 1 つは既定値の decimal になります。
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 との比較
この例には、それぞれ異なる <string> および <counter-style> 値を持つ 3 つの counters() 関数が含まれます。
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::marker { content: counters(count, "-", decimal-leading-zero) ") "; } li::before { content: counters(count, "～", upper-alpha) " == " counters(count, "*", lower-alpha); } 結果
仕様書
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # counter-functions |
| CSS Counter Styles Level 3 # extending-css2 |
ブラウザーの互換性
関連情報
- CSS カウンターの使用
counter-setプロパティcounter-resetプロパティcounter-incrementプロパティ@counter-styleアットルール- CSS の
counter()関数 ::marker擬似要素- CSS リストとカウンターモジュール
- CSS カウンタースタイルモジュール
- CSS 生成コンテンツモジュール