<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>nested lists</title>
<style type="text/css">
ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }
</style>
</head>
<body>
<ol>
<li>This is a list item</li>
<li>This is a list item
<ol>
<li>This is a nested list item.</li>
<li>This is a nested list item.</li>
<li>This is a nested list item.</li>
<li>This is a nested list item.</li>
</ol>
</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ol>
</body>
</html>This example uses a little-known CSS technique called automatic counters. It is supposed to display the outer list as “1.”, “2.”, “3.”, “4.”, “5.”, and the inner list as “2.1.”, “2.2.”, “2.3.”, “2.4.”. In other words, auto-numbering the inner list with both a major and minor item number.
The reason it is little-known is that it only works in Opera. Internet Explorer numbers them like any other nested list, as if there was no CSS at all. Mozilla doesn’t number either the inner or outer list at all (because it respects the display: block rule that wipes out the normal numbering, but doesn’t understand the counter rules that set up the nested numbering.) Opera has gotten it right for years, since version 5.
I don’t have a point, really. I just thought it was interesting.
