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
Syntax
list-style-type: armenian
list-style-type: circle
list-style-type: decimal
list-style-type: decimal-leading-zero
list-style-type: disc
list-style-type: georgian
list-style-type: inherit
list-style-type: lower-alpha
list-style-type: lower-greek
list-style-type: lower-latin
list-style-type: lower-roman
list-style-type: none
list-style-type: square
list-style-type: upper-alpha
list-style-type: upper-latin
list-style-type: upper-roman
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
The 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
.
<style>
ul { list-style-type:circle }
</style>
This example demonstrates the use of decimal-leading-zero
.
<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>
Using the list-style-type
on ordered lists
/**
* 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 */
}
If 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.
/*
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;
}
Example for unordered lists
/*
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 */
}
Example for unordered lists with list-style-type
set as none
which removes the default bullet style of the unordered list.
/**
* 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-type
s 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
andkatakana-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.
See also
Related articles
Generated and Replaced Content
list-style-type
Related pages
- CSSStyleDeclarationCSSStyleDeclaration
- currentStylecurrentStyle
- runtimeStyleruntimeStyle
- stylestyle
Attributions
Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]