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

mozilla

Revision 60850 of list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 60850
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 7 words added, 2 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-name> | {{ Cssxref("none") }}| {{ Cssxref("inherit") }}

Values

none
No item marker is shown.

<list-style-name> 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

hebrew
  • Example
cjk-ideographic
  • Example
hiragana
  • Example
hiragana-iroha
  • Example
katakana
  • Example
katakana-iroha
  • Example

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

The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, lower-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.

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)
Opera 3.5 yes 6.0-8.0
Safari (WebKit) 1.0 (85) yes 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-name&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-name&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, beginning with 1.</li>
</ul>
</dd> <dt>decimal-leading-zero</dt> <dd>
<ul> <li style="list-style-type: decimal-leading-zero;">Decimal numbers padded by initial zeros (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 (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 (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 alpha, beta, gamma, ... (α, β, γ, ...)</li>
</ul>
</dd> <dt>lower-alpha | lower-latin</dt> <dd>
<ul> <li style="list-style-type: lower-alpha;">Lowercase ASCII letters (a, b, c, ... z)</li> <li style="list-style-type: lower-alpha;"><code>lower-latin </code>is not supported in IE7 and lower, 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 (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 (ayb/ayp, ben/pen, gim/keem, ...)</li>
</ul>
</dd> <dt>georgian</dt> <dd>
<ul> <li style="list-style-type: georgian;">Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...)</li>
</ul>
</dd></dl>
<h4>CSS2 values, dropped in CSS 2.1</h4>
<dl><dt>hebrew</dt><dd>
<ul> <li style="list-style-type: hebrew;">Example</li>
</ul>
</dd><dt>cjk-ideographic</dt><dd>
<ul> <li style="list-style-type: cjk-ideographic;">Example</li>
</ul>
</dd><dt>hiragana</dt><dd>
<ul> <li style="list-style-type: hiragana;">Example</li>
</ul>
</dd><dt>hiragana-iroha</dt><dd>
<ul> <li style="list-style-type: hiragana-iroha;">Example</li>
</ul>
</dd><dt>katakana</dt><dd>
<ul> <li style="list-style-type: katakana;">Example</li>
</ul>
</dd><dt>katakana-iroha</dt><dd>
<ul> <li style="list-style-type: katakana-iroha;">Example</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>
<p>The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items, <code>lower-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.</p>
<h3>Specifications</h3>
<ul> <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</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>yes</td> <td>6.0-8.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>yes</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<p> </p><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