reset the list counter

Thu Feb 23, 2012 8:12 pm

Using counter reset CSS property with nested list allow you to reset the items counter within the inner lists .

Code:: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>reset the list counter</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type='text/css'> ol { counter-reset:Item } </style> </head> <body> <p> In this example we use reset counter property. You can notice the benefits of using this property when using nested lists. </p> <ol> <li>List 1 item 1</li> <li>List 1 item 2 <ol> <li>List 2 item 1</li> <li>List 2 item 2 <ol> <li>List 3 item 1</li> <li>List 3 item 2</li> </ol> </li> <li>List 2 item 3</li> </ol> </li> <li>List 1 item 3</li> </ol> </body> </html>