List Style Type in CSS

Syntax

The syntax for the list style type CSS property is as follows :

list-style-type in CSS

The list style type CSS property can be defined using any of the following values :

1. <custom-ident>

The <custom-ident> is a data type in CSS that describes a custom identifier pre-defined by the user of the style sheet. It is an identifier similar to the value of a @counter-style or any of its pre-defined styles.

How to name <custom-ident> Values ?

A <custom-ident> can include the following characters :

1. Any alphabetical character (A to Z, or a to z).
2. Any decimal digit (0 to 9)
3. A hyphen (-).
4. An underscore (_).
5. an escaped character preceded by a backslash ().
6. A Unicode character (in the format of a backslash followed by one to six hexadecimal digits, representing its Unicode code point).

Rules to keep in mind while naming a <custom-ident> :

1. We can not use a digit as the first character unless it is escaped.
2. We cannot start with a hyphen which is then followed by a decimal digit.
3. Cannot start with two hyphens.
4. <custom-ident> is case-sensitive.
5. Wide keywords in CSS are not valid <custom-ident>. Therefore, we cannot inherit, initial, or unset identifiers.
6. The default keyword is not a valid <custom-ident>.
7. Excluded keywords are excluded in all ASCII case permutations. So default, Default, and DEFAULT should not be used.
8. We cannot wrap <custom-ident> within quotes. Otherwise, it will be interpreted as a string instead of an identifier.

Below is the implementation for <custom-ident> :

Output :

2. Disc

The disc is the default value for the property. The marker is a filled circle in this style type.

Syntax :

Example :

Output :

3. Circle

In this style type, the marker is a hollow circle.

Syntax :

Example :

Output :

4. Square

In this style type, the marker is a filled square.

Syntax :

Example :

Output :

5. Decimal

In this style type, a marker is a Decimal number beginning with 1.

Syntax :

Example :

Output :

6. lower-roman

In this style type, the marker is a lowercase roman numeral.

Syntax :

Example :

Output :

7. upper-roman

In this style type, the marker is an uppercase Roman numeral.

Syntax :

Example :

Output :

8.lower-greek

In this style type, the marker is a lowercase classical Greek.

Syntax :

Example :

Output :

9. lower-latin

In this style type, the marker is a lowercase ASCII letter $(a, b, c, … z)$.

Syntax :

Example :

Output :

10. upper-latin

In this style type, the marker is an uppercase ASCII letter $(A, B, C, … Z)$.

Syntax :

Example :

Output :

Examples

Now let us discuss the " list style type" CSS property with the help of examples and learn how to use this property in CSS.

Setting List Item Markers

In the above " list style type" CSS example, we chose to display uppercase roman numerals in front of each list item of the ordered list.

While for the unordered list, we removed the default disc marker from the front of each list item. The list items will still indent (unless overridden with CSS), but there will be nothing appearing before each list item.

Output :

All List Style Types

In this example, we will implement all the list style types in CSS and choose the required one with the help of radio buttons.

Output :

Accessibility Concerns

Apple's VoiceOver screen reader faces an issue while working with unordered lists having a list-style-type value of none. As these lists won't be read out as a list, to address this issue, we have to add a zero-width space as pseudo content before each list item to ensure the list is read correctly.

Browser Support

The following browsers support the "list style type" CSS property :

1. Chrome
2. Microsoft Edge
3. Firefox
4. Internet Explorer
5. Opera
6. Safari
7. Chrome Android
8. Firefox for Android
9. Opera Android
10. Safari on iOS
11. Samsung Internet
12. WebView Android

Related Properties

Also check out the list-style, list-style-image, and list-style-position CSS properties.