CSS Reference Property

list-style 5w5b73

The list-style property is a shorthand property for setting list-style-position. 583c4f

The list-style property is a more convenient way to set the style of list markers for list items and items that have display: list-item, instead of using the three longhand properties each on its own.

If the image specified 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 2f2j3w

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 445h6m

<‘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 6p2z1x

A value of none within the list-style property sets whichever of 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-image to none:

ul { 
    list-style: none; 
}

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

Examples 5w70f

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 603y6q

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 51c73

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

Referencia de CSS3 6h4g2c