CSS - list-style



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