JSFiddle - React, Tailwind, and code Playground

by michaelschmid

HTML

<h1>
    List Count items and Nestend list hierarchy styling
  </h1>
  <div>
  
  <ul>
    <li>Padding left of the first ul 0 to display text algined left with preceding elements</li>
    <li>Items of the first ul color red</li>
  </ul>
  
  </div>
  <ul>
  <li>item</li> 
  <li>item             
    <ul>
      <li>item</li>     
      <li>item</li>    
       <li>item</li>    
    </ul>
  </li>
  <li>item</li>        
  <li>item</li>      
  <li>item
     <ul>
      <li>item</li>      
      <li>item</li>      
      <li>item         
    </ul>
   </li>        
  <li>item</li>       
</ul>

CSS

ul li{
  color:red;
  padding-left:0;
}

ul {
  padding-left:0;
}

ul ul{
  padding-left:2em;
}
ul ul li {
  color:blue
}

ul{
   list-style:none;
   counter-reset: my;
}


ul > li::before {
  counter-increment: my;
  content: counter(my) ; 
  margin-right: 10px;
}