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.

Sue Sims

Examples: CSS List types

Ordered Lists (Outside)

Using OL.decimalo { display: list-item; list-style: decimal outside;}

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.alphalo { display: list-item; list-style: lower-alpha outside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.romanlo { display: list-item; list-style: lower-roman outside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.alphauo { display: list-item; list-style: upper-alpha outside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.romanuo { display: list-item; list-style: upper-roman outside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Unordered Lists (Outside)

Using UL.disco { display: list-item; list-style: disc outside; }

Using UL.circleo { display: list-item; list-style: circle outside; }

Using UL.squareo { display: list-item; list-style: square outside; }

Using UL.o { display: list-item; list-style: none outside; }

Ordered Lists (Inside)

Using OL.decimali { display: list-item; list-style: decimal inside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.alphali { display: list-item; list-style: lower-alpha inside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.romanli { display: list-item; list-style: lower-roman inside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.alphaui { display: list-item; list-style: upper-alpha inside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Using OL.romanui { display: list-item; list-style: upper-roman inside; }

  1. First List Item
  2. Second List Item
  3. Final List Item

Unordered Lists (Inside)

Using UL.disci { display: list-item; list-style: disc inside; }

Using UL.circlei { display: list-item; list-style: circle inside; }

Using UL.squarei { display: list-item; list-style: square inside; }

Using UL.i { display: list-item; list-style: inside; }

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 }