CSS list-style-type – specify marker (disc, square, numeric, etc.) for a list

CSS list-style-type property is used to describe type of list item marker in a list. Its initial value is disc. The value of list-style-type can also be specified in shorthand property list-style.

CSS property list-style-type

CSS version: CSS 2.1
Value: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Initial: disc
Applies to: elements with 'display: list-item'
Inherited: yes

list-style-type value behaviour

This property specifies appearance of the list item marker if ‘list-style-image’ has the value ‘none’ or if the image pointed to by the URI cannot be displayed.

list-style-type values

There are mainly three types of markers.

  • Glyphs: specified with disc, circle, and square
  • numbering systems:
    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.).
    georgian
      Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
    armenian
      Traditional uppercase Armenian numbering.
    
  • alphabetic:
    lower-latin or lower-alpha
      Lowercase ascii letters (a, b, c, ... z).
    upper-latin or upper-alpha
      Uppercase ascii letters (A, B, C, ... Z).
    lower-greek
      Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)
    

Note that when using unordered list (ul) tag with numbered values (decimal, etc.), the number markers will appear. So list-style-type value will override the default behaviour of ul (or ol) tag.

Content as marker

CSS 3 mentions setting content as marker. This is not supported by most browsers yet.

Examples – list-style-type – disc, square and circle

In the following code, CSS property list-style-type can be changed to the following values
  • disc
  • square
  • circle
<style>
ul {
  background-color: lightgreen;
  width: 200px;
  list-style-type:disc; /*default for ul is disc*/
}
li {background-color:lightgray;}
</style>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
list-style-type refresh

Examples – list-style-type – numeric values

In the following code, CSS property list-style-type can be changed to the following values
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • georgian
  • armenian
<style>
ol {
  background-color: lightgreen;
  width: 200px;
  list-style-type:decimal;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
list-style-type refresh

Example – list-style-type – alphabetic values

In the following code, CSS property list-style-type can be changed to the following values
  • lower-alpha
  • upper-alpha
  • lower-greek
<style>
ol {
  background-color: lightgreen;
  width: 200px;
  list-style-type:lower-alpha;
}
li {background-color:lightgray;}
</style>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
list-style-type refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments