list-style-type (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Partial | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | disc |
CSS1, 2 |
Example
This style rule applies roman numerals as the numbering scheme to items in an ordered list:
ol li {
list-style-type: upper-roman;
}Description
This property specifies the
type of list marker for an item in a list—an element whose
display property has the value
list-item.
The list style type only applies if
list-style-image is set to none,
or to a URI that can’t be displayed.
List markers can either be glyphs (that is, bullets), or comprise a numeric or alphabetic numbering system. The CSS2.1 specification doesn’t define how alphabetic numbering wraps at the end of the alphabet sequence.
The
color of the list markers is the same as the computed value of the
color property for the list items.
The exact
position of the list marker can’t be specified beyond the styling allowed
by the list-style-position
property.
Value
The values
circle, disc, and
square generate glyphs as list markers. The exact
appearance of these glyphs isn’t defined by the CSS2.1 specification, but
is left to the user agent.
Numeric numbering systems include:
armenian: traditional Armenian numberingdecimal: decimal numbers (1, 2, 3, …)decimal-leading-zero: decimal numbers where values less than ten are padded by an initial zero (01, 02, 03, …)georgian: traditional Georgian numberinglower-roman: lowercase roman numerals (i, ii, iii, …)upper-roman: uppercase roman numerals (I, II, III, …)
Alphabetic numbering systems:
lower-greek: lowercase Greek letterslower-latinorlower-alpha: lowercase Latin letters (a, b, c, …)upper-latinorupper-alpha: uppercase Latin letters (A, B, C, …)
Compatibility
| IE | 5.5 | Partial |
|---|---|---|
| 6.0 | Partial | |
| 7.0 | Partial | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
Internet Explorer for
Windows versions up to and including 7 don’t support the values
armenian, decimal-leading-zero,
georgian, or lower-greek. Nor do
they support the values lower-latin or
upper-latin, although they do support the alternative
forms lower-alpha and
upper-alpha.
These browsers will not increment the list markers in numbering systems if the list item has a layout.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
User-contributed notes
- ID:
- #3
- Date:
- Mon, 12 May 2008 11:45:55 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
IE7 and under will not show the list marker if the list element is floated. There is no real cure for this.
- ID:
- #2
- Date:
- Wed, 30 Apr 2008 02:25:02 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
I have to agree.
- ID:
- #1
- Date:
- Wed, 19 Mar 2008 05:42:27 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
I have to say, finding the values for styling different bullet points (disc, circle, square) on this page was tough, given they are only mentioned as part of a sentence. I was expecting to see a table where I could see at a glance what the options were...
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
