CSS list-style Property
Description
The list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image, and list-style-position at the same place in the style sheet.
- Initial value
- See individual properties
- Applies to
- List item elements
- Inherited
- Yes
- Media
- Visual
- Computed value
- See individual properties
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.listStyle
Syntax
list-style: <list-style-type> || <list-style-position> || <list-style-image>
Values
- <list-style-type>See list-style-type CSS property for values.
- <list-style-position>See list-style-position CSS property for values.
- <list-style-image>See list-style-image CSS property for values.
- inherit
Example
<ul class="test">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
<ul class="test2">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul> .test {
list-style: square outside;
}
.test2 {
list-style: circle inside;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 4 | 12 | 1 | 1 | 7 | 1 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 1 | 18 | 4 | 10.1 | 1 | 1.0 |
Last updated by CSSPortal on: 3rd November 2019