mozilla

Revision 60846 of list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 60846
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 155 words added, 147 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
  • Percentages: N/A
  • 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
  1. A filled circle (default value)
circle
  1. A hollow circle
square
  1. A filled square
decimal
  1. Decimal numbers, beginning with 1.
decimal-leading-zero
  1. Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99)
lower-roman
  1. Lowercase roman numerals (i, ii, iii, iv, v, etc.)
upper-roman
  1. Uppercase roman numerals (I, II, III, IV, V, etc.)
lower-greek
  1. Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)
lower-alpha | lower-latin
  1. Lowercase ASCII letters (a, b, c, ... z)
  2. lower-latin is not supported in IE7 and lower, see Browser compatibility section below
upper-alpha | upper-latin
  1. Uppercase ASCII letters (A, B, C, ... Z)
  2. upper-latin is not supported in IE7 and lower, see below
armenian
  1. Traditional Armenian numbering (ayb/ayp, ben/pen, gim/keem, ...)
georgian
  1. Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...)

Mozilla extensions

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

-moz-arabic-indic
  1. Example
-moz-bengali
  1. Example
-moz-cjk-earthly-branch
  1. Example
-moz-cjk-heavenly-stem
  1. Example
-moz-devanagari
  1. Example
-moz-ethiopic-halehame
  1. Example
-moz-ethiopic-halehame-am
  1. Example
-moz-ethiopic-halehame-ti-er
  1. Example
-moz-ethiopic-halehame-ti-et
  1. Example
-moz-ethiopic-numeric
  1. Example
-moz-gujarati
  1. Example
-moz-gurmukhi
  1. Example
-moz-hangul
  1. Example
-moz-hangul-consonant
  1. Example
-moz-japanese-formal
  1. Example
-moz-japanese-informal
  1. Example
-moz-kannada
  1. Example
-moz-khmer
  1. Example
-moz-lao
  1. Example
-moz-malayalam
  1. Example
-moz-myanmar
  1. Example
-moz-oriya
  1. Example
-moz-persian
  1. Example
-moz-simp-chinese-formal
  1. Example
-moz-simp-chinese-informal
  1. Example
-moz-tamil
  1. Example
-moz-telugu
  1. Example
-moz-thai
  1. Example
-moz-trad-chinese-formal
  1. Example
-moz-trad-chinese-informal
  1. Example
-moz-urdu
  1. 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 Lowest Version
Internet Explorer yes
Firefox (Gecko) 1.0 (?)
Opera yes
Safari (WebKit) 1.0 (?)

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>Percentages: N/A</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.<br>
</dd></dl>
<p><strong>&lt;list-style-name&gt;</strong> is one of the following:</p>
<dl><dt>disc</dt> <dd>
<ol> <li style="list-style-type: disc;">A filled circle (default value)</li>
</ol>
</dd> <dt>circle</dt><dd>
<ol> <li style="list-style-type: circle;">A hollow circle</li>
</ol>
</dd> <dt>square</dt><dd>
<ol> <li style="list-style-type: square;">A filled square</li>
</ol>
</dd> <dt>decimal</dt><dd>
<ol> <li style="list-style-type: decimal;">Decimal numbers, beginning with 1.</li>
</ol>
</dd> <dt>decimal-leading-zero</dt> <dd>
<ol> <li style="list-style-type: decimal-leading-zero;">Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99)</li>
</ol>
</dd> <dt>lower-roman</dt><dd>
<ol> <li style="list-style-type: lower-roman;">Lowercase roman numerals (i, ii, iii, iv, v, etc.)</li>
</ol>
</dd> <dt>upper-roman</dt> <dd>
<ol> <li style="list-style-type: upper-roman;">Uppercase roman numerals (I, II, III, IV, V, etc.)</li>
</ol>
</dd> <dt>lower-greek</dt> <dd>
<ol> <li style="list-style-type: lower-greek;">Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)</li>
</ol>
</dd> <dt>lower-alpha | lower-latin</dt> <dd>
<ol> <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>
</ol>
</dd> <dt>upper-alpha | upper-latin</dt> <dd>
<ol> <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>
</ol>
</dd> <dt>armenian</dt> <dd>
<ol> <li style="list-style-type: armenian;">Traditional Armenian numbering (ayb/ayp, ben/pen, gim/keem, ...)</li>
</ol>
</dd> <dt>georgian</dt> <dd>
<ol> <li style="list-style-type: georgian;">Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...)</li>
</ol>
</dd> <dd> </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>
<ol> <li style="list-style-type: -moz-arabic-indic;">Example</li>
</ol>
</dd> <dt>-moz-bengali</dt> <dd>
<ol> <li style="list-style-type: -moz-bengali;">Example</li>
</ol>
</dd> <dt>-moz-cjk-earthly-branch</dt> <dd>
<ol> <li style="list-style-type: -moz-cjk-earthly-branch;">Example</li>
</ol>
</dd> <dt>-moz-cjk-heavenly-stem</dt> <dd>
<ol> <li style="list-style-type: -moz-cjk-heavenly-stem;">Example</li>
</ol>
</dd> <dt>-moz-devanagari</dt> <dd>
<ol> <li style="list-style-type: -moz-devanagari;">Example</li>
</ol>
</dd> <dt>-moz-ethiopic-halehame</dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame;">Example</li>
</ol>
</dd> <dt>-moz-ethiopic-halehame-am</dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame-am;">Example</li>
</ol>
</dd> <dt>-moz-ethiopic-halehame-ti-er</dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame-ti-er;">Example</li>
</ol>
</dd> <dt>-moz-ethiopic-halehame-ti-et</dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame-ti-et;">Example</li>
</ol>
</dd> <dt>-moz-ethiopic-numeric</dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-numeric;">Example</li>
</ol>
</dd> <dt>-moz-gujarati</dt> <dd>
<ol> <li style="list-style-type: -moz-gujarati;">Example</li>
</ol>
</dd> <dt>-moz-gurmukhi</dt> <dd>
<ol> <li style="list-style-type: -moz-gurmukhi;">Example</li>
</ol>
</dd> <dt>-moz-hangul</dt> <dd>
<ol> <li style="list-style-type: -moz-hangul;">Example</li>
</ol>
</dd> <dt>-moz-hangul-consonant</dt> <dd>
<ol> <li style="list-style-type: -moz-hangul-consonant;">Example</li>
</ol>
</dd> <dt>-moz-japanese-formal</dt> <dd>
<ol> <li style="list-style-type: -moz-japanese-formal;">Example</li>
</ol>
</dd> <dt>-moz-japanese-informal</dt> <dd>
<ol> <li style="list-style-type: -moz-japanese-informal;">Example</li>
</ol>
</dd> <dt>-moz-kannada</dt> <dd>
<ol> <li style="list-style-type: -moz-kannada;">Example</li>
</ol>
</dd> <dt>-moz-khmer</dt> <dd>
<ol> <li style="list-style-type: -moz-khmer;">Example</li>
</ol>
</dd> <dt>-moz-lao</dt> <dd>
<ol> <li style="list-style-type: -moz-lao;">Example</li>
</ol>
</dd> <dt>-moz-malayalam</dt> <dd>
<ol> <li style="list-style-type: -moz-malayalam;">Example</li>
</ol>
</dd> <dt>-moz-myanmar</dt> <dd>
<ol> <li style="list-style-type: -moz-myanmar;">Example</li>
</ol>
</dd> <dt>-moz-oriya</dt> <dd>
<ol> <li style="list-style-type: -moz-oriya;">Example</li>
</ol>
</dd> <dt>-moz-persian</dt> <dd>
<ol> <li style="list-style-type: -moz-persian;">Example</li>
</ol>
</dd> <dt>-moz-simp-chinese-formal</dt> <dd>
<ol> <li style="list-style-type: -moz-simp-chinese-formal;">Example</li>
</ol>
</dd> <dt>-moz-simp-chinese-informal</dt> <dd>
<ol> <li style="list-style-type: -moz-simp-chinese-informal;">Example</li>
</ol>
</dd> <dt>-moz-tamil</dt> <dd>
<ol> <li style="list-style-type: -moz-tamil;">Example</li>
</ol>
</dd> <dt>-moz-telugu</dt> <dd>
<ol> <li style="list-style-type: -moz-telugu;">Example</li>
</ol>
</dd> <dt>-moz-thai</dt> <dd>
<ol> <li style="list-style-type: -moz-thai;">Example</li>
</ol>
</dd> <dt>-moz-trad-chinese-formal</dt> <dd>
<ol> <li style="list-style-type: -moz-trad-chinese-formal;">Example</li>
</ol>
</dd> <dt>-moz-trad-chinese-informal</dt> <dd>
<ol> <li style="list-style-type: -moz-trad-chinese-informal;">Example</li>
</ol>
</dd> <dt>-moz-urdu</dt> <dd>
<ol> <li style="list-style-type: -moz-urdu;">Example</li>
</ol>
</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>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>yes</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (?)</td> </tr> <tr> <td>Opera</td> <td>yes</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (?)</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