list-style-type

Jump to: navigation, search

list-style-type



Summary

Specifies the type of list-item marker in a list.

Overview table

Initial value disc
Applies to elements with 'display: list-item'
Inherited Yes
Media visual
Computed value as specified
Animatable No
CSS Object Model Property

Syntax

  • list-style-type: square
  • list-style-type: lower-alpha
  • list-style-type: decimal
  • list-style-type: upper-alpha
  • list-style-type: lower-greek
  • list-style-type: decimal-leading-zero
  • list-style-type: upper-latin
  • list-style-type: lower-latin
  • list-style-type: disc
  • list-style-type: upper-roman
  • list-style-type: lower-roman
  • list-style-type: georgian
  • list-style-type: armenian
  • list-style-type: none
  • list-style-type: inherit
  • list-style-type: circle


Values

armenian
The marker is traditional Armenian numbering
circle
circle
decimal
number. This is default for <ol>
decimal-leading-zero
number with leading zeros (01, 02, 03, etc.)
disc
filled circle. This is default for <ul>
georgian
traditional Georgian numbering
inherit
The value of the listStyleType property is inherited from parent element
lower-alpha
lower-alpha (a, b, c, d, e, etc.)
lower-greek
lower-greek
lower-latin
lower-latin (a, b, c, d, e, etc.)
lower-roman
lower-roman (i, ii, iii, iv, v, etc.)
none
No marker is shown
square
square
upper-alpha
upper-alpha (A, B, C, D, E, etc.)
upper-latin
upper-latin (A, B, C, D, E, etc.)
upper-roman
upper-roman (I, II, III, IV, V, etc.)


Examples

View live exampleThe following examples use the list-style-type attribute and the list-style-type property to set the markers.

This example uses ul as a selector in an embedded (global) style sheet to change the marker type to circle.

CSS

<style>
    ul { list-style-type:circle }
</style>

View live exampleThis example demonstrates the use of decimal-leading-zero.

HTML

<style type="text/css">
.decleadzero {
	list-style-type: decimal-leading-zero;
}
...
</style>
<body>
 <ol class="decleadzero">
  <li>This is the first item. </li>
  <li>This is the second item. </li>
  <li>This is the third item. </li>
 </ol>
    ...
</body>

View live exampleUsing the list-style-type on ordered lists

CSS

/**
 * using list-style-type on ordered lists
 * the default for ol's is list-style-type: decimal
 */

.list-style--leading-zero {
	list-style-type:  decimal-leading-zero;
}

.list-style--roman {
	list-style-type:  upper-roman; /* you can also use lower-roman */
}

View live exampleIf the left padding of a line item is set to 0 and the list has list-style-position: outside; (which is the default) the list-item markers will not show.

CSS

/*
If the left padding is set to 0 the list-item markers do not show
This happens only if the list-style-position is set on outside (which is the default)
*/

ul {
	padding:0;
}

.list-position--inside {
	list-style-position: inside;
}

View live exampleExample for unordered lists

CSS

/*
	Example for unordered lists
*/

.list-style--circle {
	list-style-type: circle;
}

.list-style--square {
	list-style-type: square;
}

.list-style--square {
	list-style-type: none; /* use none to remove the bullets */
}

View live exampleExample for unordered lists with list-style-type set as none which removes the default bullet style of the unordered list.

CSS

/**
 * Example of list-style-type
 
 One value for the list-style-type is none which just removes the bullets and all.
 This example includes two unordered lists one with list-style-type set as none and other set as square bullets.
 */

#withBullets ul {
	color: #f06;
	font: italic 100% Georgia, serif;
	width: 500px;
	padding:10px;
	margin:10px;
	list-style-type:none;	/*To remove the default bullet style*/	
}
#withBullets li{
	display:inline;
	margin:8px;
	padding:4px;
}
#withBullets li:hover{
	border-bottom:3px solid black;
	border-radius:4px;
}

ul{
	color: #f06;
	font: italic 100% Georgia, serif;
	width: 500px;
	padding:10px;
	margin:10px;
	list-style-type:square;	
}
li{
	margin:8px;
}
a:link{text-decoration:none;color:green;}
a:hover{text-decoration:none;color:green;}
a:active{text-decoration:none;color:green;}
a:visited{text-decoration:none;color:green;}

Usage

The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.

Notes

Notes

  • The color of the marker will be the same as the computed color of the element it applies to.
  • 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-alpha 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 were specified in CSS2 but removed from CSS 2.1 due to lack of implementation experience. They are expected to return in the CSS3 Lists module.
  • The property also supports a shorthand syntax which is list-style
  • If the left padding of a list is set to 0 using one of the padding properties, the list-item markers do not show only if that list has the default list-style-position: inside; . For a better understanding see the examples.


Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1.0
1.0
4.0
3.5
1.0 (85)

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?


Compatibility notes

Browser Version Note
Internet Explorer 9 do not support: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha
Opera 11 do not support: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha
Internet Explorer 8, and earlier only support the property values: decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian, and inherit if a DOCTYPE is specified.

See also

Related articles

Generated and Replaced Content







  • list-style-type





Related pages

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]