mozilla

Revision 237700 of list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 237700
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment + Non prefix property; 31 words added

Revision Content

{{ CSSRef() }}

Summary

The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item, this is usually a {{ HTMLElement("li") }} element, but can be any element with this {{ cssxref("display") }} value.

  • {{ Xref_cssinitial() }} : disc
  • Applies to : elements with display:list-item
  • {{ Xref_cssinherited() }} : yes
  • Media : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : as specified

The color of the marker will be the same as the computed color of the element it applies to.

Syntax

list-style-type:  <list-style-type> | none | inherit

Values

none
No item marker is shown.

<list-style-type> is one of the following:

disc
  • A filled circle (default value)
circle
  • A hollow circle
square
  • A filled square
decimal
  • Decimal numbers
  • Beginning with 1.
decimal-leading-zero
  • Decimal numbers
  • Padded by initial zeros
  • (e.g., 01, 02, 03, ... 98, 99)
lower-roman
  • Lowercase roman numerals
  • (i, ii, iii, iv, v, etc.)
upper-roman
  • Uppercase roman numerals
  • (I, II, III, IV, V, etc.)
lower-greek
  • Lowercase classical Greek
  • alpha, beta, gamma, ...
  • (α, β, γ, ...)
lower-alpha | lower-latin
  • Lowercase ASCII letters
  • (a, b, c, ... z)
  • lower-latin is unsupported in IE7
  • See {{ anch("Browser compatibility") }} section
upper-alpha | upper-latin
  • Uppercase ASCII letters
  • (A, B, C, ... Z)
  • upper-latin is unsupported in IE7
armenian
  • Traditional Armenian numbering
  • (ayb/ayp, ben/pen, gim/keem, ...)
georgian
  • Traditional Georgian numbering
  • (an, ban, gan, ... he, tan, in ...)

CSS2 values, dropped in CSS 2.1, but supported in Gecko/Firefox and other browsers

hebrew
  • Traditional Hebrew numbering
cjk-ideographic
  • Plain ideographic numbers
  • (Chinese-Japanese-Korean)
hiragana
  • a, i, u, e, o, ka, ki, ...
  • (Japanese)
katakana
  • A, I, U, E, O, KA, KI, ...
  • (Japanese)
hiragana-iroha
  • i, ro, ha, ni, ho, he, to, ...
  • {{ interwiki('wikipedia', 'Iroha') }}
katakana-iroha
  • I, RO, HA, NI, HO, HE, TO, ...

Mozilla extensions

Extended set of values provided by Mozilla (Firefox) to support list types in other languages.

arabic-indic
-moz-arabic-indic
  • Example
bengali
-moz-bengali
  • Example
cjk-earthly-branch
-moz-cjk-earthly-branch
  • Example
cjk-heavenly-stem
-moz-cjk-heavenly-stem
  • Example
devanagari
-moz-devanagari
  • Example
-moz-ethiopic-halehame
  • Example
-moz-ethiopic-halehame-am
  • Example
ethiopic-halehame-ti-er
-moz-ethiopic-halehame-ti-er
  • Example
ethiopic-halehame-ti-et
-moz-ethiopic-halehame-ti-et
  • Example
-moz-ethiopic-numeric
  • Example
gujarati
-moz-gujarati
  • Example
gurmukhi
-moz-gurmukhi
  • Example
hangul
-moz-hangul
  • Example
hangul-consonant
-moz-hangul-consonant
  • Example
-moz-japanese-formal
  • Example
-moz-japanese-informal
  • Example
kannada
-moz-kannada
  • Example
khmer
-moz-khmer
  • Example
lao
-moz-lao
  • Example
malayalam
-moz-malayalam
  • Example
myanmar
-moz-myanmar
  • Example
oriya
-moz-oriya
  • Example
persian
-moz-persian
  • Example
-moz-simp-chinese-formal
  • Example
-moz-simp-chinese-informal
  • Example
-moz-tamil
  • Example
telugu
-moz-telugu
  • Example
thai
-moz-thai
  • Example
-moz-trad-chinese-formal
  • Example
-moz-trad-chinese-informal
  • Example
urdu
-moz-urdu
  • Example

Examples

{{ CSSLiveSample("list-style") }}

ol { list-style-type: upper-alpha; }

/* or use the shortcut "list-style": */
ol { list-style: upper-alpha; }

Notes

  • Some list-style-types require a suitable font installed to display as expected.
  • The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, upper-alpha rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,... For long lists, it is recommended that authors specify true numbers.
  • The list styles hebrew, cjk-ideographs, hiragana, katakana, hiragana-iroha and katakana-iroha are specified in CSS2 and removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support including :
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
lower-latin, upper-latin, lower-greek, armenian, georgian 1.0 1.0 (1.0) 8.0 6.0 1.0 (85)
decimal-leading-zero 1.0 1.0 (1.0) 8.0 8.0 1.0 (85)
hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha 1.0 1.0 (1.0) {{ CompatNo() }} 7.0 (displays decimal numbers) 1.0-1.2 (85-125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

For compatibility with Internet Explorer 7 (and lower) avoid lower-latin and upper-latin. Instead, use lower-alpha and upper-alpha.

Specifications

See also

  • {{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}

{{ languages({ "fr": "fr/CSS/list-style-type", "ja": "ja/CSS/list-style-type", "pl": "pl/CSS/list-style-type", "es": "es/CSS/list-style-type"}) }}

Revision Source

<div>{{ CSSRef() }}</div> <h2>Summary</h2>
<p>The<code> list-style-type </code>CSS property specifies appearance of a list item element. As it is the only one who defaults to <code>display:list-item</code>, this is usually a {{ HTMLElement("li") }} element, but can be any element with this {{ cssxref("display") }} value.</p> <ul style="display:table;padding:.4em;border-left:.15em solid;margin-left:.5em;background-color:#eef"> <li style="display:table-row;padding:3px;margin:0"><dfn style="display:table-cell;padding:0 5px;border-bottom:none;cursor:inherit">{{ Xref_cssinitial() }} :</dfn><code> disc</code></li> <li style="display:table-row;padding:3px;margin:0"><dfn style="display:table-cell;padding:0 5px;border-bottom:none;cursor:inherit">Applies to :</dfn> elements with<code> display:list-item</code></li> <li style="display:table-row;padding:3px;margin:0"><dfn style="display:table-cell;padding:0 5px;border-bottom:none;cursor:inherit">{{ Xref_cssinherited() }} :</dfn> yes</li> <li style="display:table-row;padding:3px;margin:0"><dfn style="display:table-cell;padding:0 5px;border-bottom:none;cursor:inherit">Media :</dfn> {{ Xref_cssvisual() }}</li> <li style="display:table-row;padding:3px;margin:0"><dfn style="display:table-cell;padding:0 5px;border-bottom:none;cursor:inherit">{{ Xref_csscomputed() }} :</dfn> as specified</li>
</ul> <p>The <a href="/en/CSS/color_value" title="color">color</a> of the marker will be the same as the computed color of the element it applies to.</p> <h2>Syntax</h2>
<pre class="eval" style="border-radius:1em;background:#D0D0D0">list-style-type:  &lt;list-style-type&gt; | <a href="/en/CSS/none" title="en/CSS/none">none</a> | <a href="/en/CSS/inherit" title="inherit">inherit</a>
</pre> <h2>Values</h2>
<dl> <dt>none</dt> <dd>No item marker is shown.</dd>
</dl>
<p><strong>&lt;list-style-type&gt;</strong> is one of the following:</p> <dl style="font-size:90%;background:#eee;border:1px solid powderblue;padding:.5em 0 .5em .5em;-moz-column-width:20em;-moz-column-rule:1px solid powderblue;-webkit-columns:20em;-webkit-column-rule:1px solid powderblue;"> <dt>disc</dt> <dd> <ul style="list-style-type: disc"> <li>A filled circle (default value)</li> </ul> </dd> <dt>circle</dt> <dd> <ul style="list-style-type: circle"> <li>A hollow circle</li> </ul> </dd> <dt>square</dt> <dd> <ul style="list-style-type: square"> <li>A filled square</li> </ul> </dd> <dt>decimal</dt> <dd> <ul style="list-style-type: decimal"> <li>Decimal numbers</li> <li>Beginning with 1.</li> </ul> </dd> <dt>decimal-leading-zero</dt> <dd> <ul style="list-style-type: decimal-leading-zero"> <li>Decimal numbers</li> <li>Padded by initial zeros</li> <li>(e.g., 01, 02, 03, ... 98, 99)</li> </ul> </dd> <dt>lower-roman</dt> <dd> <ul style="list-style-type: lower-roman"> <li>Lowercase roman numerals</li> <li>(i, ii, iii, iv, v, etc.)</li> </ul> </dd> <dt>upper-roman</dt> <dd> <ul style="list-style-type: upper-roman"> <li>Uppercase roman numerals</li> <li>(I, II, III, IV, V, etc.)</li> </ul> </dd> <dt>lower-greek</dt> <dd> <ul style="list-style-type: lower-greek"> <li>Lowercase classical Greek</li> <li>alpha, beta, gamma, ...</li> <li>(α, β, γ, ...)</li> </ul> </dd> <dt>lower-alpha | lower-latin</dt> <dd> <ul style="list-style-type: lower-alpha"> <li>Lowercase ASCII letters</li> <li>(a, b, c, ... z)</li> <li><code>lower-latin </code>is unsupported in IE7</li> <li>See {{ anch("Browser compatibility") }} section</li> </ul> </dd> <dt>upper-alpha | upper-latin</dt> <dd> <ul style="list-style-type: upper-alpha"> <li>Uppercase ASCII letters</li> <li>(A, B, C, ... Z)</li> <li><code>upper-latin </code>is unsupported in IE7</li> </ul> </dd> <dt>armenian</dt> <dd> <ul style="list-style-type: armenian"> <li>Traditional Armenian numbering</li> <li>(ayb/ayp, ben/pen, gim/keem, ...)</li> </ul> </dd> <dt>georgian</dt> <dd> <ul style="list-style-type: georgian"> <li>Traditional Georgian numbering</li> <li>(an, ban, gan, ... he, tan, in ...)</li> </ul> </dd>
</dl> <h3>CSS2 values, dropped in CSS 2.1, but supported in Gecko/Firefox and other browsers</h3>
<dl style="font-size:90%;background:#eee;border:1px solid powderblue; padding:.5em 0 .5em .5em;-moz-column-width:20em;-moz-column-rule:1px solid powderblue;-webkit-columns:20em;-webkit-column-rule:1px solid powderblue"> <dt>hebrew</dt> <dd> <ul style="list-style-type: hebrew"> <li>Traditional Hebrew numbering</li> </ul> </dd> <dt>cjk-ideographic</dt> <dd> <ul style="list-style-type: cjk-ideographic"> <li>Plain ideographic numbers</li> <li>(Chinese-Japanese-Korean)</li> </ul> </dd> <dt>hiragana</dt> <dd> <ul style="list-style-type: hiragana"> <li>a, i, u, e, o, ka, ki, ...</li> <li>(Japanese)</li> </ul> </dd> <dt>katakana</dt> <dd> <ul style="list-style-type: katakana"> <li>A, I, U, E, O, KA, KI, ...</li> <li>(Japanese)</li> </ul> </dd> <dt>hiragana-iroha</dt> <dd> <ul style="list-style-type: hiragana-iroha"> <li>i, ro, ha, ni, ho, he, to, ...</li> <li>{{ interwiki('wikipedia', 'Iroha') }}</li> </ul> </dd> <dt>katakana-iroha</dt> <dd> <ul style="list-style-type: katakana-iroha"> <li>I, RO, HA, NI, HO, HE, TO, ...</li> </ul> </dd>
</dl><h3>Mozilla extensions</h3>
<p>Extended set of values provided by Mozilla (Firefox) to support list types in other languages.</p>
<dl style="font-size:90%;background:#eee;border:1px solid powderblue;padding: .5em 0 .5em .5em;-moz-column-width:16em;-moz-column-rule:1px solid powderblue;-webkit-columns:16em;-webkit-column-rule:1px solid powderblue"> <dt>arabic-indic</dt> <dt>-moz-arabic-indic</dt> <dd> <ul style="list-style-type:-moz-arabic-indic; list-style-type:arabic-indic"> <li>Example</li> </ul> </dd> <dt>bengali</dt> <dt>-moz-bengali</dt> <dd> <ul style="list-style-type:-moz-bengali; list-style-type:bengali"> <li>Example</li> </ul> </dd> <dt>cjk-earthly-branch</dt> <dt>-moz-cjk-earthly-branch</dt> <dd> <ul style="list-style-type:-moz-cjk-earthly-branch;list-style-type:cjk-earthly-branch"> <li>Example</li> </ul> </dd> <dt>cjk-heavenly-stem</dt> <dt>-moz-cjk-heavenly-stem</dt> <dd> <ul style="list-style-type:-moz-cjk-heavenly-stem; list-style-type:cjk-heavenly-stem"> <li>Example</li> </ul> </dd> <dt>devanagari</dt> <dt>-moz-devanagari</dt> <dd> <ul style="list-style-type:-moz-devanagari; list-style-type:devanagari"> <li>Example</li> </ul> </dd> <dt>-moz-ethiopic-halehame</dt> <dd> <ul style="list-style-type: -moz-ethiopic-halehame"> <li>Example</li> </ul> </dd> <dt>-moz-ethiopic-halehame-am</dt> <dd> <ul style="list-style-type: -moz-ethiopic-halehame-am"> <li>Example</li> </ul> </dd> <dt>ethiopic-halehame-ti-er</dt> <dt>-moz-ethiopic-halehame-ti-er</dt> <dd> <ul style="list-style-type:-moz-ethiopic-halehame-ti-er; list-style-type:ethiopic-halehame-ti-er"> <li>Example</li> </ul> </dd> <dt>ethiopic-halehame-ti-et</dt> <dt>-moz-ethiopic-halehame-ti-et</dt> <dd> <ul style="list-style-type:-moz-ethiopic-halehame-ti-et; list-style-type:ethiopic-halehame-ti-et"> <li>Example</li> </ul> </dd> <dt>-moz-ethiopic-numeric</dt> <dd> <ul style="list-style-type: -moz-ethiopic-numeric"> <li>Example</li> </ul> </dd> <dt>gujarati</dt> <dt>-moz-gujarati</dt> <dd> <ul style="list-style-type:-moz-gujarati; list-style-type:gujarati"> <li>Example</li> </ul> </dd> <dt>gurmukhi</dt> <dt>-moz-gurmukhi</dt> <dd> <ul style="list-style-type:-moz-gurmukhi; list-style-type:gurmukhi"> <li>Example</li> </ul> </dd> <dt>hangul</dt> <dt>-moz-hangul</dt> <dd> <ul style="list-style-type:-moz-hangul; list-style-type:hangul"> <li>Example</li> </ul> </dd> <dt>hangul-consonant</dt> <dt>-moz-hangul-consonant</dt> <dd> <ul style="list-style-type:-moz-hangul-consonant; list-style-type:hangul-consonant"> <li>Example</li> </ul> </dd> <dt>-moz-japanese-formal</dt> <dd> <ul style="list-style-type: -moz-japanese-formal"> <li>Example</li> </ul> </dd> <dt>-moz-japanese-informal</dt> <dd> <ul style="list-style-type: -moz-japanese-informal"> <li>Example</li> </ul> </dd> <dt>kannada</dt> <dt>-moz-kannada</dt> <dd> <ul style="list-style-type: -moz-kannada; list-style-type:kannada"> <li>Example</li> </ul> </dd> <dt>khmer</dt> <dt>-moz-khmer</dt> <dd> <ul style="list-style-type:-moz-khmer; list-style-type:khmer"> <li>Example</li> </ul> </dd> <dt>lao</dt> <dt>-moz-lao</dt> <dd> <ul style="list-style-type:-moz-lao;list-style-type:lao"> <li>Example</li> </ul> </dd> <dt>malayalam</dt> <dt>-moz-malayalam</dt> <dd> <ul style="list-style-type:-moz-malayalam;list-style-type:malayalam"> <li>Example</li> </ul> </dd> <dt>myanmar</dt> <dt>-moz-myanmar</dt> <dd> <ul style="list-style-type:-moz-myanmar;list-style-type:myanmar"> <li>Example</li> </ul> </dd> <dt>oriya</dt> <dt>-moz-oriya</dt> <dd> <ul style="list-style-type:-moz-oriya; list-style-type:oriya"> <li>Example</li> </ul> </dd> <dt>persian</dt> <dt>-moz-persian</dt> <dd> <ul style="list-style-type:-moz-persian; list-style-type:persian"> <li>Example</li> </ul> </dd> <dt>-moz-simp-chinese-formal</dt> <dd> <ul style="list-style-type: -moz-simp-chinese-formal"> <li>Example</li> </ul> </dd> <dt>-moz-simp-chinese-informal</dt> <dd> <ul style="list-style-type: -moz-simp-chinese-informal"> <li style="list-style-type: -moz-simp-chinese-informal;">Example</li> </ul> </dd> <dt>-moz-tamil</dt> <dd> <ul style="list-style-type: -moz-tamil"> <li>Example</li> </ul> </dd> <dt>telugu</dt> <dt>-moz-telugu</dt> <dd> <ul style="list-style-type:-moz-telugu; list-style-type:telugu"> <li>Example</li> </ul> </dd> <dt>thai</dt> <dt>-moz-thai</dt> <dd> <ul style="list-style-type:-moz-thai; list-style-type:thai"> <li>Example</li> </ul> </dd> <dt>-moz-trad-chinese-formal</dt> <dd> <ul style="list-style-type: -moz-trad-chinese-formal"> <li>Example</li> </ul> </dd> <dt>-moz-trad-chinese-informal</dt> <dd> <ul style="list-style-type: -moz-trad-chinese-informal"> <li>Example</li> </ul> </dd> <dt>urdu</dt> <dt>-moz-urdu</dt> <dd> <ul style="list-style-type:-moz-urdu;list-style-type:urdu"> <li>Example</li> </ul> </dd>
</dl><h2>Examples</h2> <p>{{ CSSLiveSample("list-style") }}</p>
<pre>ol { list-style-type: upper-alpha; }

/* or use the shortcut "list-style": */
ol { list-style: upper-alpha; }</pre> <h2>Notes</h2>
<ul> <li>Some list-style-types require a suitable font installed to display as expected.</li> <li>The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, <code>upper-alpha</code> rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,... For long lists, it is recommended that authors specify true numbers.</li> <li>The list styles <code>hebrew, cjk-ideographs, hiragana, katakana, hiragana-iroha</code> and <code>katakana-iroha</code> are specified in CSS2 and removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.</li>
</ul> <h2 name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support including :<br> <code>none</code>, <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>lower-alpha</code>, <code>upper-alpha</code>, <code>lower-roman</code>, <code>upper-roman </code></td> <td>1.0</td> <td>1.0 (1.0)</td> <td>4.0</td> <td>3.5</td> <td>1.0 (85)</td> </tr> <tr> <td><code>lower-latin</code>, <code>upper-latin</code>, <code>lower-greek</code>, <code>armenian</code>, <code>georgian</code></td> <td>1.0</td> <td>1.0 (1.0)</td> <td>8.0</td> <td>6.0</td> <td>1.0 (85)</td> </tr> <tr> <td><code>decimal-leading-zero</code></td> <td>1.0</td> <td>1.0 (1.0)</td> <td>8.0</td> <td>8.0</td> <td>1.0 (85)</td> </tr> <tr> <td><code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha </code></td> <td>1.0</td> <td>1.0 (1.0)</td> <td>{{ CompatNo() }}</td> <td>7.0 (displays decimal numbers)</td> <td>1.0-1.2 (85-125)</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div> <p>For compatibility with Internet Explorer 7 (and lower) avoid <code>lower-latin</code> and <code>upper-latin</code>. Instead, use <code>lower-alpha</code> and <code>upper-alpha</code>.</p> <h2>Specifications</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/generate.html#lists" title="http://www.w3.org/TR/1998/REC-CSS2-19980512/generate.html#lists">CSS 2 #lists</a> Recommendation from May 1998, superseded by CSS 2.1</li> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type">CSS 2.1 #list-style-type</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-type">CSS 3 Lists #list-style-type</a> Early working draft</li>
</ul> <h2>See also</h2>
<ul>
<li><p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p></li>
</ul> <div class="noinclude">{{ languages({
"fr": "fr/CSS/list-style-type",
"ja": "ja/CSS/list-style-type",
"pl": "pl/CSS/list-style-type",
"es": "es/CSS/list-style-type"}) }}</div>
Revert to this revision