The CSS list properties deal with the list elements, specifically the <ul>, <ol>, and <li> elements.
list-style-type
Lists are rendered with a marker shown before each list item element (<li>). The appearance of this marker can be changed using the list-style-type property. For an unordered list (<ul>), each list item is marked in the same way. The predefined bullet values shown here can be used, with disc (a filled circle) as the initial value:
In an ordered list (<ol>), each list item is marked with a numeric character to show its position in the sequence. All major browsers support the following numeric types, with decimal as the initial value:
The following example assigns: a new list style for the two list elements. It is possible to make the <ul> display ordered markers and the <ol> to display unordered markers, but this is not good practice.
ul { list-style-type: square; } /* ■ */
ol { list-style-type: upper-roman; } /* I, II, III, ... */
The color of the marker is the same as the text color of the list element. Keep in mind that any element can be made to display list markers by changing its display type to list-item.
list-style-image
As an alternative to the predefined markers, using the list-style-image property allows a custom image to be used as the list bullet.
list-style-image : inherit | none | url(<url>)
The image path is specified inside of the CSS url function.
list-style-image: url(my-bullet.png)
This property overshadows any marker type selected with the list-style-type property. Even so, it is a good idea to specify a list-style-type as a fallback in case the custom bullet image is unavailable for any reason.
list-style-position
The list marker is normally positioned outside of the element box. list-style-position provides an alternative: to place the bullet inside of the element box.
list-style-position : inherit | outside | inside
Selecting outside aligns each line of text with the start of the first line, whereas inside causes successive lines of text to wrap underneath the marker. The inside value also visually indents the marker, as shown in Figure 23-1.
Figure 23-1
Outside and inside marker placement
list-style
list-styleis the shorthand property for setting all the list properties. The values can be set in any order because there is no ambiguity between them. Any one of the values can also be omitted, in which case the default value for that property is used.
In the following example, the type and position values of the list-style are set, which are inherited to the list items.
<ul style="list-style: inside square;">
<li>Apple</li>
<li>Orange</li>
<li>Pear</li>
</ul>
Keep in mind that list properties cannot only style list containers <ul> and <ol>, but also individual list items <li>.
Counters
Elements can be numbered automatically in CSS using the counter-increment and counter-reset properties. The counter-reset property specifies the name of the counter. It is optionally followed by the counter’s initial value, which is zero by default.
/* Create a counter named chapter */
body { counter-reset: chapter; }
The counter-increment property takes the counter’s name followed by an optional number. The number, which sets how much the counter is incremented for every occurrence of the element, is 1 by default.
/* Increment the counter at each <h1> */
h1:before { counter-increment: chapter; }
The final step of creating a counter is to display it by using the CSS counter() function with the name of the counter as its argument. In this example, the chapter number is shown before the <h1> elements:
/* Increment and display the counter */
h1:before {
content: "Chapter " counter(chapter) " - ";
counter-increment: chapter;
}
The counter. now adds the chapter number before <h1> elements.
<h1>First</h1> <!-- Chapter 1 - First -->
<h1>Second</h1> <!-- Chapter 2 - Second -->
<h1>Third</h1> <!-- Chapter 3 - Third -->
Another counter can be added to also enumerate <h2> subheadings. This counter is here reset to zero at every <h1> element:
The following example illustrates how the counters are displayed:
<h1>Head</h1> <!-- Chapter 1 - Head -->
<h2>Sub</h2> <!-- 1.1 Sub -->
<h2>Sub</h2> <!-- 1.2 Sub -->
<h1>Head</h1> <!-- Chapter 2 - Head -->
<h2>Sub</h2> <!-- 2.1 Sub -->.
Nesting Counters
CSS counters can be nested any number of levels deep. These nested counters can be combined and displayed using a CSS function called counters(). The function’s first argument is the counter name, and the second is a string that separates each counter.
ul { counter-reset: mycounter; }
li:before {
content: counters(mycounter, ".") " ";
counter-increment: mycounter;
}
These rules apply to the following unordered lists (note that a new counter instance is automatically created for every nested list):
<ul>
<li>item</li> <!-- 1 item -->
<li>item</li> <!-- 2 item -->
<ul>
<li>item</li> <!-- 2.1 item -->
<li>item</li> <!-- 2.2 item -->
</ul>
</ul>
Counters are supported in all major browsers, including all versions of Chrome, Firefox, Safari, and Opera, as well as IE 8+.
