system

/* キーワード値 */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* 複合値 */
system: fixed 3;
system: extends decimal;

これは、 3 つの形式のうちの 1 つです。

• キーワード値 cyclic, numeric, alphabetic, symbolic, additive, fixed のいずれか。
• キーワード値 fixed と整数値。
• キーワード値 extends と @counter-style の名前。

cyclic

提供された記号のリストを循環します。記号のリストの最後に到達すると、最初に戻ってやり直します。このシステムは、ただ一つの記号を持つ単純な弾丸スタイルや、複数の記号を持つスタイルに便利です。 symbols 記述子には 1 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。

fixed

有限の記号セットを指定することを定義します。指定された記号をすべて循環したら、代替スタイルが使用されます。このシステムは、カウンターの値が有限である場合に有効です。 symbols 記述子には 1 つ以上の記号を指定しなければ、カウンタースタイルが有効にはなりません。また、オプションで <integer> をシステムの後に指定し、最初の記号の値として指定することができます。この整数が省略された場合、最初の整数の値は 1 として扱われます。

symbolic

指定された記号のリストを循環します。この循環を連続して回すたびに、カウンター表現に使用される記号が 2 倍、 3 倍と増えていきます。例えば、元の記号が "◽" と "◾" であった場合、循環するごとに "◽◽" と "◾◾" 、 "◽◽◽" と "◾◾◾" のように変化します。 symbols 記述子には 1 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。このカウンターシステムは正のカウンター値に対してのみ機能します。

alphabetic

指定された記号を桁として、アルファベット記数法に解釈します。 "a" から "z" までの文字が alphabetic 記数法のカウンタースタイルの記号として指定された場合、最初の 26 個のカウンター表現は "a", "b" から "z" までとなります。この時点までは、上で説明した symbolic システムと同じ動作になります。しかし、"z" 以降は "aa", "ab", "ac"… のように続きます。

symbols 記述子には 2 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。 symbols 記述子で与えられた最初のカウンター記号は 1 として、次の記号は 2 として、以下同様に解釈されます。このシステムはまた、正のカウンター値に対してのみ定義されています。

numeric

カウンター記号を位取り記数法の桁として解釈します。この記数法は、上で説明した alphabetic システムと似ています。主な違いは、 alphabetic システムでは、 symbols 記述子で与えられた最初のカウンター記号が 1 、次の記号は 2 、以下同様に解釈されますが、この記数法では、最初のカウンター記号が 0、次は 1、次は 2 というように解釈されることです。

symbols 記述子には 2 つ以上の記号を指定する必要があります。そうでなければ、カウンタースタイルが有効になりません。

additive

ローマ数字のように、異なる値を得るために異なる位置の数字を再利用するのではなく、より大きな値を得るために追加の記号を定義する「符号-値」の記数法を表すために使用されます。このようなシステムでは、数値の値は数値の桁を足すことで求められます。

additive-symbols と呼ばれる追加の記述子は、 1 つの加算タプルで指定しなければならず、そうでなければカウンタースタイルのルールが有効になりません。加算タプルは複合カウンター記号に似ており、通常のカウンター記号と負でない整数の重みの 2 つの部分から構成されます。加算タプルは重みの降順で指定しなければならず、そうでない場合は無効となります。

extends

他のカウンタースタイルのアルゴリズムを使用し、他の側面を変更することができます。カウンタースタイルのルールが extends システムを使用している場合、指定されていない記述子やその値は、指定された拡張カウンタースタイルから取得されます。 extends で指定されたカウンタースタイル名が現在定義されているカウンタースタイル名でない場合、代わりに 10 進カウンタースタイルから拡張されます。

extends では symbols または additive-symbols 記述子を指定してはならず、そうでなければカウンタースタイルのルールが有効になりません。 1 つまたは複数のカウンタースタイル定義が extends 値でサイクルを形成する場合、ブラウザーは関係しているすべてのカウンタースタイルを 10 進数スタイルから拡張したものとして扱います。

cyclic                             |
numeric                            |
alphabetic                         |
symbolic                           |
additive                           |
[ fixed <integer>? ]               |
[ extends <counter-style-name> ]

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

ブラウザーが対応していれば、この例は次のように描画されます。

◉ One
◉ Two
◉ Three

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

@counter-style fisheye {
  system: cyclic;
  symbols: ◉;
  suffix: " ";
}

ul {
  list-style: fisheye;
}

結果

ブラウザーが対応していれば、この例は次のように描画されます。

➀ One
➁ Two
➂ Three
4 Four
5 Five

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

@counter-style circled-digits {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: " ";
}

ul {
  list-style: circled-digits;
}

結果

ブラウザーが対応していれば、この例は次のように描画されます。

  a. One
  b. Two
  c. Three
 aa. Four
 bb. Five
 cc. Six
aaa. Seven
bbb. Eight

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

結果

ブラウザーが対応していれば、この例は次のように描画されます。

 a. One
 b. Two
 c. Three
aa. Four
ab. Five
ac. Six
ba. Seven
bb. Seven

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

結果

ブラウザーが対応していれば、この例は次のように描画されます。

 b. One
 c. Two
ba. Three
bb. Four
bc. Five
ca. Six
cb. Seven
cc. Eight

symbols 記述子で指定された最初の記号は、ここでは 0 と解釈されます。

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

結果

次の例のように、 0 から 9 までの数字が記号として指定された場合、このカウンタースタイルは数字のカウンタースタイルと同様に描画されます。

CSS

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

結果

この例では、ローマ数字を使ってリストを描画しています。 range が指定されていることに注意してください。これは、カウンターの値が 3999 になるまでの間、正しいローマ数字を表示するためです。範囲を超えると、残りのカウンター表現は decimal スタイル、すなわち代替となります。もし、カウンターの値をローマ数字で表現する必要がある場合には、自分でルールを作り直すのではなく、定義済みのカウンタースタイルである upper-roman または lower-roman のどちらかを使用するとよいでしょう。

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style upper-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ul {
  list-style: upper-roman;
}

結果

この例では、 lower-alpha カウンタースタイルのアルゴリズム、記号、その他のプロパティを使用しますが、カウンター表現の後のピリオド ('.') を削除し、文字を (a), (b) などのように括弧で囲んで使用します。

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

結果

• list-style, list-style-image, list-style-position
• symbols()、無名のカウンタースタイルを生成する関数記法