The fallback
descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.
fallback
Syntax
/* Keyword values */ fallback: lower-alpha; fallback: custom-gangnam-style;
Description
If the specified fallback style is also unable to construct a representation, then its fallback style will be used. If a valid fallback style is not specified, it defaults to decimal
.
A couple of scenarios where a fallback style will be used are:
Formal definition
Related at-rule | @counter-style |
---|---|
Initial value | decimal |
Computed value | as specified |
Formal syntax
<counter-style-name>where
<counter-style-name> = <custom-ident>
Examples
Specifying a fallback counter style
HTML
<ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>
CSS
@counter-style fallback-example { system: fixed; symbols: "\24B6" "\24B7" "\24B8"; fallback: upper-alpha; } .list { list-style: fallback-example; }
Result
Specifications
Specification |
---|
CSS Counter Styles Level 3 # counter-style-fallback |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
fallback |
91
|
91
|
33
|
No
|
77
|
No
|
91
|
91
|
33
|
64
|
No
|
16.0
|
See also
-
list-style
,list-style-image
,list-style-position
-
symbols()
: the functional notation creating anonymous counter styles
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/fallback