list-style
Quick Summary for list-style
The 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 display: list-item; . By default this includes <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.0

Formal definition

Initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: none
Applies tolist items
Inheritedyes
Computed valueas each of the properties of the shorthand:list-style-image: list-style-position: as specifiedlist-style-type: as specified
Animation typediscrete

Formal syntax

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

Examples

Setting list style type and position

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk
Random CSS Property

text-justify

The text-justify CSS property sets what type of justification should be applied to text when text-align: justify; is set on an element.
text-justify css reference