CSS Reference Property

list-style 1s66b

The list-style property is a shorthand property for setting list-style-position. 42x1p

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 2r1j5a

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 291l5

<‘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 1y2t2j

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 2t4m6h

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 3h4i39

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 f3k20

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

Referencia de CSS3 201m1