list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 60875
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

{{ CSSRef() }}

Summary

The list-style-type CSS property specifies appearance of a list item marker.

  • {{ 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 related {{ HTMLElement("li") }} element.

Syntax

 list-style-type:  <list-style-type> | {{ Cssxref("none") }} | {{ Cssxref("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, ...
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.

-moz-arabic-indic
  • Example
-moz-bengali
  • Example
-moz-cjk-earthly-branch
  • Example
-moz-cjk-heavenly-stem
  • Example
-moz-devanagari
  • Example
-moz-ethiopic-halehame
  • Example
-moz-ethiopic-halehame-am
  • Example
-moz-ethiopic-halehame-ti-er
  • Example
-moz-ethiopic-halehame-ti-et
  • Example
-moz-ethiopic-numeric
  • Example
-moz-gujarati
  • Example
-moz-gurmukhi
  • Example
-moz-hangul
  • Example
-moz-hangul-consonant
  • Example
-moz-japanese-formal
  • Example
-moz-japanese-informal
  • Example
-moz-kannada
  • Example
-moz-khmer
  • Example
-moz-lao
  • Example
-moz-malayalam
  • Example
-moz-myanmar
  • Example
-moz-oriya
  • Example
-moz-persian
  • Example
-moz-simp-chinese-formal
  • Example
-moz-simp-chinese-informal
  • Example
-moz-tamil
  • Example
-moz-telugu
  • Example
-moz-thai
  • Example
-moz-trad-chinese-formal
  • Example
-moz-trad-chinese-informal
  • Example
-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)
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 | decimal-leading-zero  1.0 1.0 (1.0) 8.0 6.0  (8.0 decimal-leading-zero) 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", "pl": "pl/CSS/list-style-type", "es": "es/CSS/list-style-type" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> list-style-type </code>CSS property specifies appearance of a <a href="/en/HTML/Element/li" title="en/HTML/Element/li">list item</a> marker.</p>
<ul style="display:table;padding: 0;"> <li style="display:table-row;padding: 3px;list-style-type:none;margin:0;"><dfn style="display:table-cell;padding: 0 5px;">{{ Xref_cssinitial() }}:</dfn><code> disc</code></li> <li style="display:table-row;padding: 3px;list-style-type:none;margin:0;"><dfn style="display:table-cell;padding: 0 5px;">Applies to:</dfn> elements with<code> display:list-item</code></li> <li style="display:table-row;padding: 3px;list-style-type:none;margin:0;"><dfn style="display:table-cell;padding: 0 5px;">{{ Xref_cssinherited() }}:</dfn> yes</li> <li style="display:table-row;padding: 3px;list-style-type:none;margin:0;"><dfn style="display:table-cell;padding: 0 5px;">Media:</dfn> {{ Xref_cssvisual() }}</li> <li style="display:table-row;padding: 3px;list-style-type:none;margin:0;"><dfn style="display:table-cell;padding: 0 5px;">{{ 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 related {{ HTMLElement("li") }} element.</p><h3>Syntax</h3>
<pre class="eval"> list-style-type:  &lt;list-style-type&gt; | {{ Cssxref("none") }} | {{ Cssxref("inherit") }}</pre>
<h3>Values</h3>
<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-color:#eee; border:1px solid powderblue; padding:0.5em 0 0.5em 0.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>
<h4>CSS2 values, dropped in CSS 2.1, but supported in Gecko/Firefox and other browsers</h4>
<dl style="font-size:90%; background-color:#eee; border:1px solid powderblue; padding:0.5em 0 0.5em 0.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> </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>
<h4>Mozilla extensions</h4>
<p>Extended set of values provided by Mozilla (Firefox) to support list types in other languages.</p>
<dl style="font-size:90%; background-color:#eee; border:1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-width:16em; -moz-column-rule:1px solid powderblue; -webkit-columns:16em; -webkit-column-rule:1px solid powderblue;"> <dt>-moz-arabic-indic</dt> <dd> <ul style="list-style-type: -moz-arabic-indic;"> <li>Example</li> </ul> </dd> <dt>-moz-bengali</dt> <dd> <ul style="list-style-type: -moz-bengali;"> <li>Example</li> </ul> </dd> <dt>-moz-cjk-earthly-branch</dt> <dd> <ul style="list-style-type: -moz-cjk-earthly-branch;"> <li>Example</li> </ul> </dd> <dt>-moz-cjk-heavenly-stem</dt> <dd> <ul style="list-style-type: -moz-cjk-heavenly-stem;"> <li>Example</li> </ul> </dd> <dt>-moz-devanagari</dt> <dd> <ul style="list-style-type: -moz-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>-moz-ethiopic-halehame-ti-er</dt> <dd> <ul style="list-style-type: -moz-ethiopic-halehame-ti-er;"> <li>Example</li> </ul> </dd> <dt>-moz-ethiopic-halehame-ti-et</dt> <dd> <ul style="list-style-type: -moz-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>-moz-gujarati</dt> <dd> <ul style="list-style-type: -moz-gujarati;"> <li>Example</li> </ul> </dd> <dt>-moz-gurmukhi</dt> <dd> <ul style="list-style-type: -moz-gurmukhi;"> <li>Example</li> </ul> </dd> <dt>-moz-hangul</dt> <dd> <ul style="list-style-type: -moz-hangul;"> <li>Example</li> </ul> </dd> <dt>-moz-hangul-consonant</dt> <dd> <ul style="list-style-type: -moz-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>-moz-kannada</dt> <dd> <ul style="list-style-type: -moz-kannada;"> <li>Example</li> </ul> </dd> <dt>-moz-khmer</dt> <dd> <ul style="list-style-type: -moz-khmer;"> <li>Example</li> </ul> </dd> <dt>-moz-lao</dt> <dd> <ul style="list-style-type: -moz-lao;"> <li>Example</li> </ul> </dd> <dt>-moz-malayalam</dt> <dd> <ul style="list-style-type: -moz-malayalam;"> <li>Example</li> </ul> </dd> <dt>-moz-myanmar</dt> <dd> <ul style="list-style-type: -moz-myanmar;"> <li>Example</li> </ul> </dd> <dt>-moz-oriya</dt> <dd> <ul style="list-style-type: -moz-oriya;"> <li>Example</li> </ul> </dd> <dt>-moz-persian</dt> <dd> <ul style="list-style-type: -moz-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>-moz-telugu</dt> <dd> <ul style="list-style-type: -moz-telugu;"> <li>Example</li> </ul> </dd> <dt>-moz-thai</dt> <dd> <ul style="list-style-type: -moz-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>-moz-urdu</dt> <dd> <ul style="list-style-type: -moz-urdu;"> <li>Example</li> </ul> </dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre>ol { list-style-type: upper-alpha; }

/* or use the shortcut "list-style": */
ol { list-style: upper-alpha; }</pre>
<h3>Notes</h3>
<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> <h3 name="Browser_Compatibility">Browser compatibility</h3>
<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><code>none | disc | circle | square | decimal | lower-alpha | upper-alpha | lower-roman | 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 | upper-latin | lower-greek | armenian | georgian | decimal-leading-zero </code></td> <td> 1.0</td> <td>1.0 (1.0)</td> <td>8.0</td> <td>6.0  (8.0 <code>decimal-leading-zero</code>)</td> <td>1.0 (85)</td> </tr> <tr> <td><code>hebrew | cjk-ideographic | hiragana | hiragana-iroha | katakana | 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<span style="font-family: Verdana,Tahoma,sans-serif;">. </span></code>Instead, u<code><span style="font-family: Verdana,Tahoma,sans-serif;">se</span></code><code> lower-alpha </code>and<code> upper-alpha</code>.</p>
<h3>Specifications</h3>
<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>
<h3>See also</h3>
<p>{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}</p>
<p>{{ languages( { "fr": "fr/CSS/list-style-type", "pl": "pl/CSS/list-style-type", "es": "es/CSS/list-style-type" } ) }}</p>
Revert to this revision