ol { counter-reset:Item } : ol « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. ol

ol { counter-reset:Item }

    
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
ol { counter-reset:Item }
li:before { 
  content: counter(Item) " "; 
  counter-increment: Item }


</style>


</head>
<body>
<ol>
  <li>List Item</li>
  <li>List Item
    <ol>
      <li>List Item</li>
      <li>List Item
        <ol>
          <li>List Item</li>
          <li>List Item</li>
        </ol>

    </li>
  <li>List Item</li>
  </ol>

  </li>
  <li>List Item</li>
</ol>
</body>
</html>








Related examples in the same category

1.'ol' creates an indented numbered (ordered) list
2.'start' specifies the starting number in an ordered list
3.'type' defines the style for the list items
4.Unordered Lists
5.OL tag
6.Style for 'ol li'
7.list-style: none for OL
8.Add border to LI tag
9.Nested OL tag
10.Three level OL list
11.ol elements without a type attribute: have a numeric sequence type (i.e., 1, 2, ...)
12.A nested ordered list
13.Example of the start Attribute
14.Example of the value Attribute
15.Ordered lists started at 5
16.Numbering options on ordered lists
17.Ordered List Example
18.ol {list-style-type: lower-roman;}