list-style
list-style
The list-style property is a shorthand property for setting list-style-type, list-style-image and list-style-position.
| 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 |
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 the parent element (normally <ol> or <ul>) to let it apply to all list items.
Syntax
/* type */
list-style: square;
/* image */
list-style: url('../img/dino.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/dino.png') outside;
list-style: none;
/* Global values */
list-style: inherit;
list-style: initial;
list-style: unset;
Values
Accepts 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 if the image is unavailable.
<'list-style-type'>- See
list-style-type <'list-style-image'>- See
list-style-image <'list-style-position'>- See
list-style-position
Formal syntax
<'list-style-type'> || <'list-style-position'> || <'list-style-image'>
Examples
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 and Counters 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
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 |
See also
© 2005–2017 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
