CSS Cookbook, 3rd Edition (Animal Guide)

2017-07-07 02:10:07

‚ < ‚ Day Day Up ‚ > ‚

Problem

You want to change the default list style, for example to change the bullet or numbering as in Figure 4-2.

Figure 4-2. The list markers changed to lowercase Roman numerals

Solution

Use the list-style-type property to change the bullet or type of counter:

li { list-style-type: lower-roman; }

Discussion

The CSS 2.1 specification offers several styles for numbering a list, as shown in Table 4-1. Browsers typically vary the bullet style from one level of nesting to the next . To stop lists from presenting this traditional system of setting the list marker, change the value of list-style-type for each child list.

Table 4-1. Styles available for list markers

Style/value	Description	Browser support
square	Usually a filled-in square, although the exact representation isn't defined.	All major browsers
disc	Usually a filled-in circle, although the exact representation isn't defined.	All major browsers
circle	Usually an unfilled circle, although the exact representation isn't defined.	All major browsers
decimal	Starts with 1 and continues with 2, 3, 4, etc.	All major browsers
decimal-leading-zero	Starts with 01 and continues with 02, 03, 04, etc. The number of leading zeros may equal the number of digits used in a list. For example, 0001 might be used for a 5876-item list.	All major browsers, although leading zeros is optional
lower-roman	Starts with lowercase roman numbers .	All major browsers
upper-roman	Starts with uppercase roman numbers.	All major browsers
lower-alpha	Starts with lowercase ASCII letters .	All major browsers
upper-alpha	Starts with uppercase ASCII letters.	All major browsers
lower-latin	Starts with lowercase ASCII letters.	All major browsers
upper-latin	Starts with uppercase ASCII letters.	All major browsers
lower-greek	Starts with classical Greek letters, starting with alpha and then beta, gamma, etc.	Safari, Mozilla, Netscape 6+
hebrew	Starts counting with traditional Hebrew.	Safari, Mozilla, Netscape 6+
hiragana	Starts counting with the Japanese hiragana system.	Mozilla, Netscape 6+
katakana	Starts counting with the Japanese traditional katana system.	Mozilla, Netscape 6+
hiragana-iroha	Starts counting with the Japanese hiragana-iroha system.	Mozilla, Netscape 6+
katakana-iroha	Starts counting with the Japanese katakana-iroha system.	Mozilla, Netscape 6+
none	No marker is displayed.	All major browsers