How Can CSS Create Nested Ordered Lists with Numbering Like 1.1, 1.2, 1.3?

Ordered Lists with Nested Numbering

Can CSS produce ordered list items that appear as 1.1, 1.2, 1.3 instead of the default 1, 2, 3 sequence?

Solution Using Counters

To achieve this result, you can harness the power of CSS counters:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

The above style sheet initializes a counter called item for each

element. The
1. elements are set to display as blocks, and a pseudo-element :before is added to each
2. to display the counter value followed by a period and a space. The counter-increment property increments the counter for each
3. element.

   Example

   <ol>
     <li>li element
       <ol>
         <li>sub li element</li>
         <li>sub li element</li>
         <li>sub li element</li>
       </ol>
     </li>
     <li>li element</li>
     <li>li element
       <ol>
         <li>sub li element</li>
         <li>sub li element</li>
         <li>sub li element</li>
       </ol>
     </li>
   </ol>

   With the applied CSS, this HTML will render the list items with nested numbering as desired:

   • 1. li element
     2. 1.1. sub li element
     3. 1.2. sub li element
     4. 1.3. sub li element
   • 2. li element
   • 3. li element
     4. 3.1. sub li element
     5. 3.2. sub li element
     6. 3.3. sub li element

   The above is the detailed content of How Can CSS Create Nested Ordered Lists with Numbering Like 1.1, 1.2, 1.3?. For more information, please follow other related articles on the PHP Chinese website!