CSS Reference Property

list-style

The list-style property is a shorthand property for setting list-style-type, list-style-image, and list-style-position.

The list-style property is a more convenient way to set the style of list markers for list items and items that have <a href="http://tympanus.net/codrops/css_reference/display">display</a>: list-item, instead of using the three longhand properties each on its own.

If the image specified using the list-style-image property is available, it will replace the the marker set using the list-style-type property.

If any of the three values of the longhand properties is not set in the shorthand property, it is set to its default value by the browser.

A list-style can be set on a a list item or on the list of items (<ul> or &ltl;ol>) and that style will cascade and be applied to the list items in that list.

Official Syntax

Syntax:

list-style: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit

Initial: disc outside none; which is the initial value of each of the longhand properties
Applies To: elements with display: list-item
Animatable: no; none of the three longhand properties is animatable

Values

<‘list-style-type’>: See the list-style-type entry for a list of possible values.
<‘list-style-position’>: See the list-style-position entry for a list of possible values.
<‘list-style-image’>: See the list-style-image entry for a list of possible values.
inherit: The list item inherits its list-style value from its parent.

Notes

A value of none within the list-style property sets whichever of list-style-type and list-style-image are not otherwise specified to none. However, if both are otherwise specified, the declaration is in error (and thus ignored).

For example, a value of none for the list-style property sets both list-style-type and list-style-image to none:

ul { 
    list-style: none; 
}

The result is that no list-item marker is displayed.

Examples

ol {
    list-style: url(images/arrow.png) disc; /* both an image and a style type can be specified, image will replace type if available */
}

ul li {
    list-style: upper-roman inside;
}

ol li > li {
    list-style: circle;
}

ul {
    list-style: square url('images/fancy-square.png') inside; /* if the 'fancy square' image is not available, the default square style will be used instead */
}

Live Demo

The following demo shows different cases of styling list item markers. Refer to the entry for each individual property mentioned above for more information on the possible values and combinations possible.

View this demo on the Codrops Playground

Browser Support

The list-style property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.