symbols()

symbols() は CSS の関数で、カウンタースタイルをインラインで、 list-style のようなプロパティの値で直接定義することができます。 @counter-style とは異なり、 symbols()無名です (すなわち一度しか使用できません)。 @counter-style よりも機能は劣りますが、より簡単でより短く書くことができます。

構文

css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );

<symbols-type> は以下のうちの一つで指定することができます。

  • cyclic: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。
  • numeric: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。
  • alphabetic: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 0 がありません。
  • symbolic: このシステムでは値を循環させ、循環ごとに数を増やします(最初の循環では 1 回、 2 回目は 2 回、など)。
  • fixed: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。

HTML

html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>

CSS

css
ol {
  list-style: symbols(cyclic "*" "†" "‡");
}

結果

仕様書

Specification
CSS Counter Styles Level 3
# symbols-function

ブラウザーの互換性

BCD tables only load in the browser

関連情報