Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 60852 of list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 60852
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 176 words added, 19 words removed

Revision Content

{{ CSSRef() }}

Summary

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

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

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 not supported in IE7 and lower
  • See Browser compatibility section below
upper-alpha | upper-latin
  • Uppercase ASCII letters
  • (A, B, C, ... Z)
  • upper-latin is not supported in IE7 and lower, see below
armenian
  • Traditional Armenian numbering
  • (ayb/ayp, ben/pen, gim/keem, ...)
georgian
  • Traditional Georgian numbering
  • (an, ban, gan, ..., he, tan, in, in-an, ...)

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

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-latin 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 have been removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.

Specifications

Browser compatibility

Browser disc | circle | sqare | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman | none hebrew | cjk-ideographic | hiragana | hiragana-iroha | katakana | katakana-iroha lower-greek | lower-latin | upper-latin | armenian | georgian |decimal-leading-zero
Internet Explorer 4.0 --- 8.0
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) 1.0 (1.0)
Opera 3.5 6.0-8.0 6.0-8.0
Safari (WebKit) 1.0 (85) 1.0 (85) 1.0 (85)

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> <li>{{ Xref_cssinitial() }}: {{ Cssxref("disc") }}</li> <li>Applies to: elements with<code> display: list-item</code></li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<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><dt>disc</dt> <dd>
<ul> <li style="list-style-type: disc;">A filled circle (default value)</li>
</ul>
</dd> <dt>circle</dt><dd>
<ul> <li style="list-style-type: circle;">A hollow circle</li>
</ul>
</dd> <dt>square</dt><dd>
<ul> <li style="list-style-type: square;">A filled square</li>
</ul>
</dd> <dt>decimal</dt><dd>
<ul> <li style="list-style-type: decimal;">Decimal numbers</li> <li style="list-style-type: decimal;">Beginning with 1.</li>
</ul>
</dd> <dt>decimal-leading-zero</dt> <dd>
<ul> <li style="list-style-type: decimal-leading-zero;">Decimal numbers</li> <li style="list-style-type: decimal-leading-zero;">Padded by initial zeros</li> <li style="list-style-type: decimal-leading-zero;">(e.g., 01, 02, 03, ..., 98, 99)</li>
</ul>
</dd> <dt>lower-roman</dt><dd>
<ul> <li style="list-style-type: lower-roman;">Lowercase roman numerals</li> <li style="list-style-type: lower-roman;">(i, ii, iii, iv, v, etc.)</li>
</ul>
</dd> <dt>upper-roman</dt> <dd>
<ul> <li style="list-style-type: upper-roman;">Uppercase roman numerals</li> <li style="list-style-type: upper-roman;">(I, II, III, IV, V, etc.)</li>
</ul>
</dd> <dt>lower-greek</dt> <dd>
<ul> <li style="list-style-type: lower-greek;">Lowercase classical Greek</li> <li style="list-style-type: lower-greek;">alpha, beta, gamma, ...</li> <li style="list-style-type: lower-greek;">(α, β, γ, ...)</li>
</ul>
</dd> <dt>lower-alpha | lower-latin</dt> <dd>
<ul> <li style="list-style-type: lower-alpha;">Lowercase ASCII letters</li> <li style="list-style-type: lower-alpha;">(a, b, c, ... z)</li> <li style="list-style-type: lower-alpha;"><code>lower-latin </code>is not supported in IE7 and lower</li> <li style="list-style-type: lower-alpha;">See Browser compatibility section below</li>
</ul>
</dd> <dt>upper-alpha | upper-latin</dt> <dd>
<ul> <li style="list-style-type: upper-alpha;">Uppercase ASCII letters</li> <li style="list-style-type: upper-alpha;">(A, B, C, ... Z)</li> <li style="list-style-type: upper-alpha;"><code>upper-latin </code>is not supported in IE7 and lower, see below</li>
</ul>
</dd> <dt>armenian</dt> <dd>
<ul> <li style="list-style-type: armenian;">Traditional Armenian numbering</li> <li style="list-style-type: armenian;">(ayb/ayp, ben/pen, gim/keem, ...)</li>
</ul>
</dd> <dt>georgian</dt> <dd>
<ul> <li style="list-style-type: georgian;">Traditional Georgian numbering</li> <li style="list-style-type: georgian;">(an, ban, gan, ..., he, tan, in, in-an, ...)</li>
</ul>
</dd></dl>
<h4>CSS2 values, dropped in CSS 2.1, but supported in Gecko/Firefox and other browsers</h4>
<dl><dt>hebrew</dt><dd>
<ul> <li style="list-style-type: hebrew;">Traditional Hebrew numbering</li>
</ul>
</dd><dt>cjk-ideographic</dt><dd>
<ul> <li style="list-style-type: cjk-ideographic;">Plain ideographic numbers</li> <li style="list-style-type: cjk-ideographic;">(Chinese-Japanese-Korean)</li>
</ul>
</dd><dt>hiragana</dt><dd>
<ul> <li style="list-style-type: hiragana;">a, i, u, e, o, ka, ki, ...</li> <li style="list-style-type: hiragana;">(Japanese)</li>
</ul>
</dd><dt>katakana</dt><dd>
<ul> <li style="list-style-type: katakana;">A, I, U, E, O, KA, KI, ...</li> <li style="list-style-type: katakana;">(Japanese)</li>
</ul>
</dd><dt>hiragana-iroha</dt><dd>
<ul> <li style="list-style-type: hiragana-iroha;">i, ro, ha, ni, ho, he, to, ...</li>
</ul>
</dd><dt>katakana-iroha</dt><dd>
<ul> <li style="list-style-type: katakana-iroha;">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><dt>-moz-arabic-indic</dt> <dd>
<ul> <li style="list-style-type: -moz-arabic-indic;">Example</li>
</ul>
</dd> <dt>-moz-bengali</dt> <dd>
<ul> <li style="list-style-type: -moz-bengali;">Example</li>
</ul>
</dd> <dt>-moz-cjk-earthly-branch</dt> <dd>
<ul> <li style="list-style-type: -moz-cjk-earthly-branch;">Example</li>
</ul>
</dd> <dt>-moz-cjk-heavenly-stem</dt> <dd>
<ul> <li style="list-style-type: -moz-cjk-heavenly-stem;">Example</li>
</ul>
</dd> <dt>-moz-devanagari</dt> <dd>
<ul> <li style="list-style-type: -moz-devanagari;">Example</li>
</ul>
</dd> <dt>-moz-ethiopic-halehame</dt> <dd>
<ul> <li style="list-style-type: -moz-ethiopic-halehame;">Example</li>
</ul>
</dd><dt>-moz-ethiopic-halehame-am</dt> <dd>
<ul> <li style="list-style-type: -moz-ethiopic-halehame-am;">Example</li>
</ul>
</dd> <dt>-moz-ethiopic-halehame-ti-er</dt> <dd>
<ul> <li style="list-style-type: -moz-ethiopic-halehame-ti-er;">Example</li>
</ul>
</dd> <dt>-moz-ethiopic-halehame-ti-et</dt> <dd>
<ul> <li style="list-style-type: -moz-ethiopic-halehame-ti-et;">Example</li>
</ul>
</dd> <dt>-moz-ethiopic-numeric</dt> <dd>
<ul> <li style="list-style-type: -moz-ethiopic-numeric;">Example</li>
</ul>
</dd> <dt>-moz-gujarati</dt> <dd>
<ul> <li style="list-style-type: -moz-gujarati;">Example</li>
</ul>
</dd> <dt>-moz-gurmukhi</dt> <dd>
<ul> <li style="list-style-type: -moz-gurmukhi;">Example</li>
</ul>
</dd> <dt>-moz-hangul</dt> <dd>
<ul> <li style="list-style-type: -moz-hangul;">Example</li>
</ul>
</dd> <dt>-moz-hangul-consonant</dt> <dd>
<ul> <li style="list-style-type: -moz-hangul-consonant;">Example</li>
</ul>
</dd> <dt>-moz-japanese-formal</dt> <dd>
<ul> <li style="list-style-type: -moz-japanese-formal;">Example</li>
</ul>
</dd> <dt>-moz-japanese-informal</dt> <dd>
<ul> <li style="list-style-type: -moz-japanese-informal;">Example</li>
</ul>
</dd> <dt>-moz-kannada</dt> <dd>
<ul> <li style="list-style-type: -moz-kannada;">Example</li>
</ul>
</dd> <dt>-moz-khmer</dt> <dd>
<ul> <li style="list-style-type: -moz-khmer;">Example</li>
</ul>
</dd> <dt>-moz-lao</dt> <dd>
<ul> <li style="list-style-type: -moz-lao;">Example</li>
</ul>
</dd> <dt>-moz-malayalam</dt> <dd>
<ul> <li style="list-style-type: -moz-malayalam;">Example</li>
</ul>
</dd> <dt>-moz-myanmar</dt> <dd>
<ul> <li style="list-style-type: -moz-myanmar;">Example</li>
</ul>
</dd> <dt>-moz-oriya</dt> <dd>
<ul> <li style="list-style-type: -moz-oriya;">Example</li>
</ul>
</dd> <dt>-moz-persian</dt> <dd>
<ul> <li style="list-style-type: -moz-persian;">Example</li>
</ul>
</dd> <dt>-moz-simp-chinese-formal</dt> <dd>
<ul> <li style="list-style-type: -moz-simp-chinese-formal;">Example</li>
</ul>
</dd> <dt>-moz-simp-chinese-informal</dt> <dd>
<ul> <li style="list-style-type: -moz-simp-chinese-informal;">Example</li>
</ul>
</dd> <dt>-moz-tamil</dt> <dd>
<ul> <li style="list-style-type: -moz-tamil;">Example</li>
</ul>
</dd> <dt>-moz-telugu</dt> <dd>
<ul> <li style="list-style-type: -moz-telugu;">Example</li>
</ul>
</dd> <dt>-moz-thai</dt> <dd>
<ul> <li style="list-style-type: -moz-thai;">Example</li>
</ul>
</dd> <dt>-moz-trad-chinese-formal</dt> <dd>
<ul> <li style="list-style-type: -moz-trad-chinese-formal;">Example</li>
</ul>
</dd> <dt>-moz-trad-chinese-informal</dt> <dd>
<ul> <li style="list-style-type: -moz-trad-chinese-informal;">Example</li>
</ul>
</dd> <dt>-moz-urdu</dt> <dd>
<ul> <li style="list-style-type: -moz-urdu;">Example</li>
</ul>
</dd></dl>
<h3>Examples</h3>
<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-latin </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 have been removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.</li>
</ul>
<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>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th><code>disc | circle | sqare | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman | none</code></th> <th><code> hebrew | cjk-ideographic | hiragana | hiragana-iroha | katakana | katakana-iroha </code></th> <th><code>lower-greek | lower-latin | upper-latin | armenian | georgian |decimal-leading-zero</code></th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> <td>8.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>6.0-8.0</td> <td>6.0-8.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.0 (85)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<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