Revision 60863 of list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 60863
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes; page display name reset to default

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 unsupported in IE7
  • See 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

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 none | disc | circle | sqare | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman lower-latin | upper-latin | lower-greek | armenian | georgian | decimal-leading-zero hebrew | cjk-ideographic | hiragana | hiragana-iroha | katakana | katakana-iroha
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 decimal-leading-zero) 7.0 displays decimal numbers
Safari (WebKit) 1.0 (85) 1.0 (85) 1.0-1.2  (85-125)

For compatibility with Internet Explorer 7 (and lower) use lower-alpha and upper-alpha instead of lower-latin and upper-latin.

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 style="border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em;background-color:#eee;"> <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 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="border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em;background-color:#eee;"> <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="border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; font-size:90%; -moz-column-width: 16em;background-color:#eee;"> <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>
<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>none | disc | circle | sqare | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman </code></th> <th><code>lower-latin | upper-latin | lower-greek | armenian | georgian | decimal-leading-zero </code></th> <th><code> hebrew | cjk-ideographic | hiragana | hiragana-iroha | katakana | katakana-iroha </code></th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>8.0</td> <td>---</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 <code>decimal-leading-zero</code>)</td> <td>7.0 displays decimal numbers</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.0 (85)</td> <td>1.0-1.2  (85-125)</td> </tr> </tbody>
</table>
<p>For compatibility with Internet Explorer 7 (and lower) use<code> lower-alpha </code>and<code> upper-alpha </code>instead of<code> lower-latin </code>and<code> upper-latin</code>.</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