Nested UL with custom counter - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:ul

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. ul

Introduction

The following code shows a list that contains two nested lists.

All three lists are numbered using custom values. Nesting Lists have with Custom Counters.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
body {<!--from  w  w  w .  j  a  v a2 s.c om-->
   counter-reset: OuterItemCount 5 InnerItemCount;
}
#outerlist > li:before {
   content: counter(OuterItemCount) ". ";
   counter-increment: OuterItemCount 2;
}
ul.innerlist > li:before {
   content: counter(InnerItemCount, lower-alpha) ". ";
   counter-increment: InnerItemCount;
}

      </style> 
   </head> 
   <body>
       I like: 
      <ul id="outerlist" style="list-style-type: none"> 
         <li>A</li> 
         <li>B: </li> 
         <ul class="innerlist"> 
            <li>Java</li> 
            <li>SQL</li> 
            <li>CSS</li> 
         </ul> 
         <li>Database</li> 
         <li>
            RDBM: 
            <ul class="innerlist"> 
               <li>MySQL</li> 
               <li>Javascript</li> 
               <li>SQL Server</li> 
            </ul> 
         </li> 
         <li>C</li> 
         <li>C++</li> 
      </ul>  
   </body>
</html>

Related Tutorials