CSS - list-style Property
The list-style CSS property is a shorthand property used to set all the list style properties in a single declaration.
Possible Values
Following are the possible values that can be passed to list-style property:
list-style-type: Sets the marker of a list item.
list-style-image: Sets an image as the marker of a list item.
list-style-position: Sets the position of the ::marker relative to the list item.
none: No list style is applied to the list.
The CSS property list-style can list one, two or three keywords in any order, as its value(s). When values list-style-image and list-style-type are passed, the list-style-type acts as a fallback option, in case of list-style-image not supported or unavailable.
Applies to
All the elements with display: list-item.
DOM Syntax
object.style.listStyle = <'list-style-position'> || <'list-style-image'> || <'list-style-type'>
Accessbility concerns: An ordered or unordered list is not recognized by Safari browser as a list, if it has a list-style equal to none. In order to address this intended behavior, you need to add role="list" to the <ol> or <ul> elements.
The pseudo-content that is accessible can restore list semantics.
An empty string or spaces, passed as values to content = "" || " ", will be ignored.
In order to keep these markers, visually hidden, you need to apply an <image> to the list style property.
These workarounds must be used only when there is no solution , and should be checked thoroughly to avoid any unxpected behavior.
CSS list-style - Shorthand
Here is an example of list-style shorthand CSS property:
<html> <head> <style> .circle1 { list-style: circle filled; } .circle2 { list-style: circle; } .square { list-style: square outside none; } </style> </head> <body> <h2>Example - list style shorthand</h2> <ul class="circle1"><u>List style - circle / filled</u> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul> <ul class="circle2"><u>List style - circle</u> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul> <ul class="square"><u>List style - square / outside / none</u> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ul> </body> </html>
Following table lists the different longhand properties of list-style:
Property | Description |
---|---|
list-style-image | Adds an image as a list item marker. |
list-style-position | Sets the position of the marker of a list. |
list-style-type | Sets the marker of a list. |
To Continue Learning Please Login
Login with Google