Summary
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:
|
Animatable | no |
Canonical order | order of appearance in the formal grammar of the values |
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
How to read CSS 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
See also
Document Tags and Contributors
Tags:
Contributors to this page:
SphinxKnight,
Sebastianz,
fscholz,
MajinBui,
wbamberg,
EliasH,
kscarfone,
teoli,
Sheppy,
ethertank,
hydrurga,
McGurk,
grendel,
Alex Lakatos,
Jürgen Jeka,
Nathymig,
BijuGC,
DBaron,
Mgjbot,
Ptak82,
Rappo
Last updated by:
SphinxKnight,