Cascading Style Sheets: The Definitive Guide, Second Edition

Chapter 12. Lists and Generated Content

In the realm of CSS layout, lists are an interesting case. The items in a list are simply block boxes, but with an extra bit that doesn’t really participate in the document layout hanging off to one side. With an ordered list, that extra bit contains a series of increasing numbers (or letters) that are calculated and mostly formatted by the user agent, not the author. Taking a cue from the document structure, the user agent generates the numbers and their basic presentation.

None of this content-generation could be described in CSS1 terms—and, therefore, it couldn’t be controlled—but CSS2 introduced features that allow list-item numbering to be described. As a result, CSS now lets you, the author, define your own counting patterns and formats, and associate those counters with any element, not just ordered list items. Furthermore, this basic mechanism makes it possible to insert other kinds of content, including text strings, attribute values, or even external resources into a document. Thus, it becomes possible to use CSS to insert link icons, editorial symbols, and more into a design without having to create extra markup.

To see how all these list options fit together, we’ll explore basic list styling before moving on to examine the generation of content and counters.

Lists

In a sense, almost anything that isn’t narrative text can be considered a list. The U.S. Census, the Solar System, my family tree, a restaurant menu, all the friends you’ve ...