list-style
Quick Summary for list-style
list-style
CSS shorthand property allows you to set all the list style properties at once.
Code Usage for list-style
/* 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: revert; list-style: unset;
More Details for list-style
list-style
The list-style
CSS shorthand property allows you to set all the list style properties at once.
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.
Constituent properties
This property is a shorthand for the following CSS properties:
list-style-image
list-style-position
list-style-type
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: revert; 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
In a notable exception, Safari will not recognize an unordered list as a list in the accessibility tree if has a list-style
value of none
.
The most straightforward way to address this is to add an explicit role="list"
to the <ul>
element in the markup. This will restore the list semantics without affecting the design.
CSS-only workarounds are also available for those who do not have access to the markup. One is to add a zero-width space as pseudo-content before each list item:
ul { list-style: none; } ul li::before { content: "\200B"; }
A second approach is to apply a url value to the list-style property:
nav ol, nav ul { list-style: none; } /* becomes */ nav ol, nav ul { list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); }
These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact users' experiences.
'Fixing' Lists 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.0Formal definition
Initial value | as each of the properties of the shorthand:list-style-type : disc list-style-position : outside list-style-image : none |
---|---|
Applies to | list items |
Inherited | yes |
Computed value | as each of the properties of the shorthand:list-style-image : list-style-position : as specifiedlist-style-type : as specified |
Animation type | discrete |
Formal syntax
<'list-style-type'> || <'list-style-position'> || <'list-style-image'>
Examples
Setting list style type and position
HTMLList 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; }
ResultSpecifications
Specification |
---|
CSS Lists and Counters Module Level 3 # list-style-property |
See also
list-style-type
, list-style-image
, list-style-position
Select your preferred language English (US)DeutschEspañolFrançais日本語中文 (简体) Change language