This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

list-style

Summary

Shorthand property that sets the list-style-type, list-style-position and list-style-image properties in one declaration.

Overview table

Initial value
disc outside none
Applies to
elements with display: list-item
Inherited
Yes
Media
visual
Computed value
see individual properties
Animatable
No
CSS Object Model Property
listStyle

Syntax

  • list-style: inherit
  • list-style: list-style-type list-style-position list-style-image

Values

list-style-type list-style-position list-style-image
The list-style property can contain up to three components:
  • list-style-type: This takes any of the range of style values available to the list-style-type, which includes circle, disc, decimal, upper-roman, etc. To see a the full list of possible values, see the list-style-type.
  • list-style-position: Specifies if the list-item markers should appear inside or outside the content flow.
  • list-style-image: This property sets the image that will be used as the list item marker.
inherit
Takes the same specified value as the property for the element’s parent. (Acts similarly to other uses of inherit in CSS.)

Examples

The following example contains multiple examples of using this property, omitting some of the values.

/* Specifying the list-style providing all the values */
.first-list {
    list-style: disc inside url(/docs/w/skins/webplatform/images/logo.svg);
}

 /* Omitting the position value it will use its default, 'outside' */
.second-list {
    list-style: disc url(/docs/w/skins/webplatform/images/logo.svg);
}

  /* When an available image is provided, it always takes precedence over type */
.third-list {
    list-style: circle url(/docs/w/skins/webplatform/images/logo.svg);
}

/* When omitting image and type, it will use their default values: 'disc' for type and and 'none' for image*/
.fourth-list {
    list-style: outside;
}

View live example

An example to show how setting padding-left to 0 when position is set to outside will produce the market not being shown at all. A ul contained in a div with overflow hidden might run into this issue.

ul {
    padding-left: 0;
}

.list-position-outside {
    list-style-position: outside;
}

.list-position-inside {
    list-style-position: inside;
}

View live example

Usage

 The list-style property is a composite property. You can omit one or more of the values. If both list-style-type and list-style-image are provided, and the value for this last one is different than none and links to an available image, the image takes precedence and it will be shown as the marker.

When the list-style-position value is set to outside and the padding or padding-left is set to 0, the list marker won’t be displayed.

Related specifications

CSS Lists and Counters Module Level 3
Working Draft
CSS Level 2 (Revision 1)
Recommendation

See also

Related articles

CSS Attributes

Related pages

Attributions