
This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.
CSS Lists
CSS2 offers a complex mechanism for implementing automatic counters and generated text through the combination of several properties. These properties are listed below, then examples are provided. As of 30 August, 1998, no UA has implemented the necessary portions of CSS2 to make the examples utile.
Examples: CSS List types
Ordered Lists (Outside)
Using OL.decimalo { display: list-item; list-style: decimal outside;}
- First List Item
- Second List Item
- Final List Item
Using OL.alphalo { display: list-item; list-style: lower-alpha outside; }
- First List Item
- Second List Item
- Final List Item
Using OL.romanlo { display: list-item; list-style: lower-roman outside; }
- First List Item
- Second List Item
- Final List Item
Using OL.alphauo { display: list-item; list-style: upper-alpha outside; }
- First List Item
- Second List Item
- Final List Item
Using OL.romanuo { display: list-item; list-style: upper-roman outside; }
- First List Item
- Second List Item
- Final List Item
Unordered Lists (Outside)
Using UL.disco { display: list-item; list-style: disc outside; }
- First List Item
- Second List Item
- Final List Item
Using UL.circleo { display: list-item; list-style: circle outside; }
- First List Item
- Second List Item
- Final List Item
Using UL.squareo { display: list-item; list-style: square outside; }
- First List Item
- Second List Item
- Final List Item
Using UL.o { display: list-item; list-style: none outside; }
- First List Item
- Second List Item
- Final List Item
Ordered Lists (Inside)
Using OL.decimali { display: list-item; list-style: decimal inside; }
- First List Item
- Second List Item
- Final List Item
Using OL.alphali { display: list-item; list-style: lower-alpha inside; }
- First List Item
- Second List Item
- Final List Item
Using OL.romanli { display: list-item; list-style: lower-roman inside; }
- First List Item
- Second List Item
- Final List Item
Using OL.alphaui { display: list-item; list-style: upper-alpha inside; }
- First List Item
- Second List Item
- Final List Item
Using OL.romanui { display: list-item; list-style: upper-roman inside; }
- First List Item
- Second List Item
- Final List Item
Unordered Lists (Inside)
Using UL.disci { display: list-item; list-style: disc inside; }
- First List Item
- Second List Item
- Final List Item
Using UL.circlei { display: list-item; list-style: circle inside; }
- First List Item
- Second List Item
- Final List Item
Using UL.squarei { display: list-item; list-style: square inside; }
- First List Item
- Second List Item
- Final List Item
Using UL.i { display: list-item; list-style: inside; }
- First List Item
- Second List Item
- Final List Item
Examples: Value & Start Attributes
CSS2 offers a complex mechanism for implementing automatic counters and generated text through the combination of several properties. These properties are listed below, then examples are provided. As of 30 August, 1998, no UA has implemented the necessary portions of CSS2 to make the examples utile.
display: list-item content: counter(name) content: counter(name, style) :before :after counter-reset: integer counter-reset: identifier counter-increment: integer counter-increment: identifier OL { counter-reset: item }LI { display: block }LI:before { content: counters(item, "."); counter-increment: item }