mozilla

Revision 60845 of list-style-type

  • Revision slug: CSS/list-style-type
  • Revision title: list-style-type
  • Revision id: 60845
  • Created:
  • Creator: Wjjohnst
  • Is current revision? No
  • Comment 252 words added; page display name changed to 'list-style-type'

Revision Content

{{ CSSRef() }}

Summary

list-style-type specifies appearance of the 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:  <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;

Values

<std-list-style-name>
A standard list style name disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
disc
A filled circle.
  1. Example
circle
A hollow circle.
  1. Example
square
A filled square.
  1. Example
decimal
Decimal numbers, beginning with 1.
  1. Example
decimal-leading-zero
Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
  1. Example
lower-roman
Lowercase roman numerals (i, ii, iii, iv, v, etc.).
  1. Example
upper-roman
Uppercase roman numerals (I, II, III, IV, V, etc.).
  1. Example
lower-greek
Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...).
  1. Example
lower-latin
Lowercase ascii letters (a, b, c, ... z).
  1. Example
upper-latin
Uppercase ascii letters (A, B, C, ... Z).
  1. Example
armenian
Traditional Armenian numbering (ayb/ayp, ben/pen, gim/keem, ...).
  1. Example
georgian
Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
  1. Example
lower-alpha
Same as lower-latin.
  1. Example
upper-alpha
Same as upper-latin.
  1. Example
none
No bullet type.
  1. Example

Mozilla extensions

Extended set of values provided by Mozilla to support list types in other languages. Note these will not display correctly in non-Gecko based browsers.

-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: decimal;
}

Notes

This 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 (and will continue as AA, AB, AC,...). Therefore, for long lists, it is recommended that authors specify true numbers.

Specifications

Browser Compatibility

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 name="Summary">Summary</h3>
<p><code>list-style-type</code> specifies appearance of the <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 'display: list-item'</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: N/A</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"> list-style-type:  &lt;std-list-style-name&gt; | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;
</pre>
<h3 name="Values">Values</h3>
<dl> <dt>&lt;std-list-style-name&gt; </dt> <dd>A standard list style name <code>disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha</code> </dd> <dt><code>disc</code></dt> <dd> A filled circle.
<ol> <li style="list-style-type: disc;">Example</li>
</ol>
</dd> <dt><code>circle</code></dt> <dd> A hollow circle.
<ol> <li style="list-style-type: circle;">Example</li>
</ol>
</dd> <dt><code>square</code></dt> <dd> A filled square.
<ol> <li style="list-style-type: square;">Example</li>
</ol>
</dd> <dt><code>decimal</code></dt> <dd> Decimal numbers, beginning with 1.
<ol> <li style="list-style-type: decimal;">Example</li>
</ol>
</dd> <dt><code>decimal-leading-zero</code></dt> <dd> Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
<ol> <li style="list-style-type: decimal-leading-zero;">Example</li>
</ol>
</dd> <dt><code>lower-roman</code></dt> <dd> Lowercase roman numerals (i, ii, iii, iv, v, etc.).
<ol> <li style="list-style-type: lower-roman;">Example</li>
</ol>
</dd> <dt><code>upper-roman</code></dt> <dd> Uppercase roman numerals (I, II, III, IV, V, etc.).
<ol> <li style="list-style-type: upper-roman;">Example</li>
</ol>
</dd> <dt><code>lower-greek</code></dt> <dd> Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...).
<ol> <li style="list-style-type: lower-greek;">Example</li>
</ol>
</dd> <dt><code>lower-latin</code></dt> <dd> Lowercase ascii letters (a, b, c, ... z).
<ol> <li style="list-style-type: lower-alpha;">Example</li>
</ol>
</dd> <dt><code>upper-latin</code></dt> <dd> Uppercase ascii letters (A, B, C, ... Z).
<ol> <li style="list-style-type: upper-alpha;">Example</li>
</ol>
</dd> <dt><code>armenian</code></dt> <dd> Traditional Armenian numbering (ayb/ayp, ben/pen, gim/keem, ...).
<ol> <li style="list-style-type: armenian;">Example</li>
</ol>
</dd> <dt><code>georgian</code></dt> <dd> Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
<ol> <li style="list-style-type: georgian;">Example</li>
</ol>
</dd> <dt><code>lower-alpha</code></dt> <dd> Same as <code>lower-latin</code>.
<ol> <li style="list-style-type: lower-alpha;">Example</li>
</ol>
</dd> <dt><code>upper-alpha</code></dt> <dd> Same as <code>upper-latin</code>.
<ol> <li style="list-style-type: upper-alpha;">Example</li>
</ol>
</dd> <dt><code>none</code></dt> <dd> No bullet type.
<ol> <li style="list-style-type: none;">Example</li>
</ol>
</dd>
<h3>Mozilla extensions</h3>
<p>Extended set of values provided by Mozilla to support list types in other languages. Note these will not display correctly in non-Gecko based browsers.</p>
<dt><code>-moz-arabic-indic</code></dt> <dd>
<ol> <li style="list-style-type: -moz-arabic-indic;">Example</li>
</ol>
</dd> <dt><code>-moz-bengali</code></dt> <dd>
<ol> <li style="list-style-type: -moz-bengali;">Example</li>
</ol>
</dd> <dt><code>-moz-cjk-earthly-branch</code></dt> <dd>
<ol> <li style="list-style-type: -moz-cjk-earthly-branch;">Example</li>
</ol>
</dd> <dt><code>-moz-cjk-heavenly-stem</code></dt> <dd>
<ol> <li style="list-style-type: -moz-cjk-heavenly-stem;">Example</li>
</ol>
</dd> <dt><code>-moz-devanagari</code></dt> <dd>
<ol> <li style="list-style-type: -moz-devanagari;">Example</li>
</ol>
</dd> <dt><code>-moz-ethiopic-halehame</code></dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame;">Example</li>
</ol>
</dd> <dt><code>-moz-ethiopic-halehame-am</code></dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame-am;">Example</li>
</ol>
</dd> <dt><code>-moz-ethiopic-halehame-ti-er</code></dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame-ti-er;">Example</li>
</ol>
</dd> <dt><code>-moz-ethiopic-halehame-ti-et</code></dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-halehame-ti-et;">Example</li>
</ol>
</dd> <dt><code>-moz-ethiopic-numeric</code></dt> <dd>
<ol> <li style="list-style-type: -moz-ethiopic-numeric;">Example</li>
</ol>
</dd> <dt><code>-moz-gujarati</code></dt> <dd>
<ol> <li style="list-style-type: -moz-gujarati;">Example</li>
</ol>
</dd> <dt><code>-moz-gurmukhi</code></dt> <dd>
<ol> <li style="list-style-type: -moz-gurmukhi;">Example</li>
</ol>
</dd> <dt><code>-moz-hangul</code></dt> <dd>
<ol> <li style="list-style-type: -moz-hangul;">Example</li>
</ol>
</dd> <dt><code>-moz-hangul-consonant</code></dt> <dd>
<ol> <li style="list-style-type: -moz-hangul-consonant;">Example</li>
</ol>
</dd> <dt><code>-moz-japanese-formal</code></dt> <dd>
<ol> <li style="list-style-type: -moz-japanese-formal;">Example</li>
</ol>
</dd> <dt><code>-moz-japanese-informal</code></dt> <dd>
<ol> <li style="list-style-type: -moz-japanese-informal;">Example</li>
</ol>
</dd> <dt><code>-moz-kannada</code></dt> <dd>
<ol> <li style="list-style-type: -moz-kannada;">Example</li>
</ol>
</dd> <dt><code>-moz-khmer</code></dt> <dd>
<ol> <li style="list-style-type: -moz-khmer;">Example</li>
</ol>
</dd> <dt><code>-moz-lao</code></dt> <dd>
<ol> <li style="list-style-type: -moz-lao;">Example</li>
</ol>
</dd> <dt><code>-moz-malayalam</code></dt> <dd>
<ol> <li style="list-style-type: -moz-malayalam;">Example</li>
</ol>
</dd> <dt><code>-moz-myanmar</code></dt> <dd>
<ol> <li style="list-style-type: -moz-myanmar;">Example</li>
</ol>
</dd> <dt><code>-moz-oriya</code></dt> <dd>
<ol> <li style="list-style-type: -moz-oriya;">Example</li>
</ol>
</dd> <dt><code>-moz-persian</code></dt> <dd>
<ol> <li style="list-style-type: -moz-persian;">Example</li>
</ol>
</dd> <dt><code>-moz-simp-chinese-formal</code></dt> <dd>
<ol> <li style="list-style-type: -moz-simp-chinese-formal;">Example</li>
</ol>
</dd> <dt><code>-moz-simp-chinese-informal</code></dt> <dd>
<ol> <li style="list-style-type: -moz-simp-chinese-informal;">Example</li>
</ol>
</dd> <dt><code>-moz-tamil</code></dt> <dd>
<ol> <li style="list-style-type: -moz-tamil;">Example</li>
</ol>
</dd> <dt><code>-moz-telugu</code></dt> <dd>
<ol> <li style="list-style-type: -moz-telugu;">Example</li>
</ol>
</dd> <dt><code>-moz-thai</code></dt> <dd>
<ol> <li style="list-style-type: -moz-thai;">Example</li>
</ol>
</dd> <dt><code>-moz-trad-chinese-formal</code></dt> <dd>
<ol> <li style="list-style-type: -moz-trad-chinese-formal;">Example</li>
</ol>
</dd> <dt><code>-moz-trad-chinese-informal</code></dt> <dd>
<ol> <li style="list-style-type: -moz-trad-chinese-informal;">Example</li>
</ol>
</dd> <dt><code>-moz-urdu</code></dt> <dd>
<ol> <li style="list-style-type: -moz-urdu;">Example</li>
</ol>
</dd> </dl>
<h3 name="Examples">Examples</h3>
<pre>ol {
    list-style-type: decimal;
}
</pre>
<h3 name="Notes">Notes</h3>
<p>This 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 (and will continue as AA, AB, AC,...). Therefore, for long lists, it is recommended that authors specify true numbers.</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#list-style-type">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-type">css3-lists</a></li>
</ul>
<h3 name="Browser_Compatibility">Browser Compatibility</h3>
<h3 name="See_Also">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