The List-Style-Type Property

The list-style-type property sets whether there is a label and, if so, its appearance.

Name:	list-style-type
Value:	disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | lower-latin | upper-alpha | upper-latin | lower-greek | armenian | georgian | none
Initial:	disc
Applies to:	elements with display property value "list-item"
Inherited:	yes
Percentages:	relative to parent's font size

You can set the style of the label by specifying either a keyword or a URL. The property has nine values that are keywords. They can be divided into groups as follows.

To set the label to a predefined symbol:

• disc () this is the default

• circle ()

• square ()

To set the label to a number:

• decimal (1, 2, 3,...)

• decimal-leading-zero (01, 02, 03,...)

• lower-roman (i, ii, iii,...)

• upper-roman (I, II, III,...)

• lower-alpha/lower-latin (a, b, c,...)

• upper-alpha/upper-latin (A, B, C,...)

• lower-greek (classical Greek numbers: a b g)

• armenian, georgian (traditional numbering systems using the Armenian and Georgian scripts, respectively)

The final keyword, none, suppresses the label.

However, none does not suppress the counting in a numbered list. If the next list item has a visible label, it will be two numbers higher than the item before the invisible label. For example, suppose you have a list of three list items and the value of the second item is set to none. The first item will be numbered 1 and the last item will be numbered 3, even though there is no visible number 2 next to the second item. It will look like this:

1	Item with list-style-type: decimal
	Item with list-style-type: none
3	Item with list-style-type: decimal

The following are several examples of rules that set labels:

 OL { list-style: lower-alpha }        /* a b c d... */ OL { list-style: lower-roman }        /* i ii iii... */ UL UL { list-style: square }          /* square bullet */ LI.nolabel { list-style: none }       /* no label */ UL UL.compact { list-style: circle }  /* circle */