list-style
==========

The **`list-style`** CSS shorthand property allows you to set all the list style properties at once.

Try it
------

The values of this property are applied to list items, including `<li>` elements and elements with ``display`: list-item;`. 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 nested items.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `list-style-image`
* `list-style-position`
* `list-style-type`
Syntax
------


```css
/\* type \*/
list-style: square;

/\* image \*/
list-style: url("../img/shape.png");

/\* position \*/
list-style: inside;

/\* two values \*/
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/\* three values \*/
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: revert-layer;
list-style: unset;
```


The `list-style` property is specified as one, two, or three values in any order. If `list-style-type` and `list-style-image` are both set, the `list-style-type` is used as a fallback if the image is unavailable.

### Values

`list-style-type`

A `<counter-style>`, `<string>`, or `none`. If omitted in the shorthand, the default `disc` value is used. See `list-style-type`.

`list-style-image`

An `<image>` or `none`. If omitted, the default `none` value is used. See `list-style-image`.

`list-style-position`

Either `inside` or `outside`. If omitted, the default `outside` value is used. See `list-style-position`.

`none`

No list style is used.

Formal 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`: The keyword `none` or the computed <image>
* `list-style-position`: as specified
* `list-style-type`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `list-style-image`: discrete
* `list-style-position`: discrete
* `list-style-type`: discrete
 |

Formal syntax
-------------
```

list-style =   
  <'list-style-position'>  ||  
  <'list-style-image'>     ||  
  <'list-style-type'>        
  
```

Examples
--------

### Setting list style type and position

#### HTML


```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


```css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}
```


#### Result

Accessibility concerns
----------------------

Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a `list-style` value of `none`, unless the list is nested within the `<nav>` navigation element. This behavior is intentional and is not considered a bug.

To ensure lists are announced as lists, include `role="list"` to `<ol>` and `<ul>` elements, especially if the list is not nested in a `<nav>`. This restores list semantics without affecting the design:


```html
<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>
```


If an ARIA `role` is not an option for your code, CSS can be used instead. Adding non-empty pseudo-content such as text or images before each list item can restore list semantics, but impacts the visual appearance. Safari determines if the added pseudo-content suffices as accessible content, restoring list semantics if so. Generally, Safari considers text and images as sufficient, which is why the `content: "+ ";` shown below works (but requires additional styling to not affect the design).


```css
ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}
```


A declaration of `content: "";` (an empty string) is ignored, as are `content` values that contain only spaces, such as `content: " ";`.

These CSS workarounds should only be used when an HTML solution is unavailable, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact user experience.

* 'Fixing' Lists (2023)
* VoiceOver and list-style-type: none (2017)
* Understanding WCAG: Create content that can be presented in different ways
* Understanding success criterion 1.3.1: Info and relationships | WCAG 2.1
Specifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-property |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Component properties: `list-style-type`, `list-style-image`, and `list-style-position`
* `::marker` pseudo-element
* CSS lists and counters module
* CSS counter styles module