The list-style
CSS property is a shorthand to set list style properties list-style-type
, list-style-image
, and list-style-position
.
Note: This property is applied to list items, i.e., elements with
. By default this includes 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.
/* 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.
list-style-type
list-style-type
.list-style-image
list-style-image
.list-style-position
list-style-position
.none
<'list-style-type'> || <'list-style-position'> || <'list-style-image'>
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>
.one { list-style: circle; } .two { list-style: square inside; }
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"; }
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. |
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | list items |
Inherited | yes |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
symbols
|
No | ? | 35 | No | No | No |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | 12 | 4 | 6 | 1 | Yes |
symbols
|
No | No | ? | 35 | No | No | No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style