The list-style CSS shorthand property allows you set all the list style properties at once.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Note: This property is applied to list items, i.e., elements with display: list-item;<li> elements. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* Keyword value */
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;
The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.
Values
list-style-type- See
list-style-type. list-style-image- See
list-style-image. list-style-position- See
list-style-position. none- No list style is used.
Accessibility concerns
Safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. To address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.
ul {
list-style: none;
}
ul li::before {
content: "\200B";
}
- VoiceOver and list-style-type: none – Unfettered Thoughts
- MDN Understanding WCAG, Guideline 1.3 explanations
- Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Formal definition
| Initial value | as each of the properties of the shorthand:
|
|---|---|
| Applies to | list items |
| Inherited | yes |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | discrete |
Formal syntax
<'list-style-type'> | <'list-style-position'> | <'list-style-image'>
Examples
Setting list style type and position
HTML
List 1 <ul class="one"> <li>List Item1</li> <li>List Item2</li> <li>List Item3</li> </ul> List 2 <ul class="two"> <li>List Item A</li> <li>List Item B</li> <li>List Item C</li> </ul>
CSS
.one {
list-style: circle;
}
.two {
list-style: square inside;
}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Lists Module Level 3 The definition of 'list-style' in that specification. |
Working Draft | No change. |
| CSS Level 2 (Revision 1) The definition of 'list-style' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
symbols | Chrome No support No | Edge No support No | Firefox Full support 35 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 35 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support