B.59. list-style

This shorthand property lets you set the three list-style properties with a single property declaration.

All three elements are optional, but any property you do not specify will be implicitly set to its initial value (overriding any value specified in a rule of lesser or equal priority).

For this property to have any effect, the target element (or one of its descendants, which will inherit this property) must have it display property set to list-item. The recommended method to set the list-style properties for a list, is to apply the properties to the list element so that the individual list items inherit them.

Inherited: Yes

See also: Section B.60list-style-image, Section B.61list-style-position, and Section B.62list-style-type.

B.59.1. Value

The syntax for this property is as follows:

list-style: type
					position
					image

Each of the three values is optional (as indicated by the square brackets); however, at least one must appear. type is any valid value for list-style-type, position is any valid value for list-style-position, and image is any valid value for list-style-image. These three values may appear in any order.

If you specify both type and image, the type will be used when the image fails to load.

Setting this property to none will set both list-style-image and list-style-type to none.

Initial value: none

B.59.2. Compatibility

CSS Version: 1

This property is supported by all CSS-compatible browsers.

Netscape 4 does not support list-style-image and list-style-position; consequently, those elements of this property are nonfunctional in that browser.

B.59.3. Examples

These style rules set an image for unordered lists and a Roman numeral format for ordered lists:

ul {
  list-style: url(/images/bullet.gif);
}
ol {
  list-style: upper-roman;
}

Compare these rules to the following:

ul {
  list-style-image: url(/images/bullet.gif);
}
ol {
  list-style-type: upper-roman;
}

If we had an ordered list (ol) nested inside an unordered list (ul), the first set of rules above would have the intended effect of displaying Roman numerals for the ordered list. The second set of rules, however, would display images for all the list elements—in both the ordered and unordered lists—because the nested, ordered list would inherit the list-style-image property from the unordered list. This doesn't happen with the first set of style rules because list-style: upper-roman implicitly sets the list-style-image property to none.