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
が既定値となります。
試してみましょう
構文
値
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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
counters() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
関連情報
- CSS カウンターの使用
counter-set
プロパティcounter-reset
プロパティcounter-increment
プロパティ@counter-style
アットルール- CSS の
counter()
関数 ::marker
擬似要素- CSS リストとカウンターモジュール
- CSS カウンタースタイルモジュール
- CSS 生成コンテンツモジュール