カスタム カウンター スタイルの定義法。
作者は カスタム カウンター スタイルを定義できる。カウンター スタイルを成す各成分は、@counter-style 規則内の記述子で指定される。そのアルゴリズムは、［system、および［symbols／additive-symbols］］記述子の組み合せで暗黙的に指定される。
次に挙げるキーワードは、妥当な <counter-style-name> ではあるが、ここでカウンター スタイル規則を命名するために利用された場合は妥当でない ― その場合、当の規則は無効になる（extends システムなど、他の文脈においては利用できる）：
@counter-style 規則の導入部の文脈下では、ASCII 大小無視で［"decimal"、"disc"］いずれかに合致する <counter-style-name> も無効であり、その結果 @counter-style 規則も無効になる。
注記： <custom-ident> では、CSS 全域キーワードは自動的に除外されることに注意。
加えて、inside の様な一部の名前は、カウンター スタイル名としては妥当であるが、list-style などの【カウンター スタイル名を値の成分にとるような】プロパティの既存のキーワード値と競合するため、ここでは実用にならない。
カウンター スタイルの名前は、文字大小区別である。しかしながら、この仕様で定義される各名前は、カウンター スタイルとして利用される所では ― 例えば［各種 list-style-＊ プロパティ／@counter-style 規則／counter() 関数／counters() 関数］にて ― 構文解析時に ASCII 小文字化される。
各 @counter-style 規則は、すべてのカウンター スタイル記述子用に、暗黙的または明示的に値を指定する。規則にて明示的に与えられていない値は、この仕様にて各種記述子に挙げられる初期値をとる。これらの記述子が適用されるのは、もっぱら，それらを定義した @counter-style 規則の文脈の中に限られ、文書言語の要素には適用されない。記述子がどの要素に適用されるかや、値の子要素への継承の観念はない。@counter-style 規則内に、同じ名前の記述子が複数あるときは、最後に指定された妥当な記述子のみが利用され、他の記述子は無視されるものとする。
@counter-style 規則で定義されたカスタムカウンターは、規則を含んでいる文書全体で可用になる。同じ名前の、複数の @counter-style 規則が定義されている場合：
注記： 定義済みカウンタースタイルでも、上書きできる【ただし、decimal は除く】。ユーザー エージェント スタイルシートの優先順位は、他のスタイルシートより低いので。
この at‐規則は、CSS の前方互換な構文解析要件に適合する ― この規則を解さない適合構文解析器は、エラーを伴うことなく、それを無視することになる。ユーザー エージェントはまた、自身が［認識しない／実装していない］記述子、あるいは、その値が、この仕様の、現在または将来のバージョンで与えられる文法に合致しない記述子を、まるごと無視するものとする ― そのような記述子が @counter-style 規則を無効にすることはない。
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
.items {
list-style: circled-alpha;
}
HTMLに組み込んでの表示例：
以下のCSSが組み込んであります：
<OL class=Test> <LI>１ <LI>２ <LI>３ <LI>４ <LI>５ <LI>６ </OL>¶system:fixedだと、カウントを越えると数字になってしまう。
<SPAN class=Test_b>テスト</SPAN>counter()のカウンターではないようだ。
| 表示内容： |
| 表示内容： |