CODEWITHSUNDEEP
csscss-counter
olo
olo

Reputation: 5271

CSS Nesting counters: UL inside OL count

It is easy to get the correct count if ol inside ol the format looks like below

 <ol>
  <li>item</li> 
  <li>item             
    <ol>
      <li>item</li>     
      <li>item</li>    
      <li>item          
    </ol>
  </li>
  <li>item</li>        
  <li>item</li>      
  <li>item
     <ol>
      <li>item</li>      
      <li>item</li>      
      <li>item         
    </ol>
   </li>        
  <li>item</li>       
</ol>

However, if I want to put ul inside ol I can't get counter works correctly

  <ol>
  <li>item</li> 
  <li>item             
    <ul>
      <li>item</li>     
      <li>item</li>    
      <li>item          
    </ul>
  </li>
  <li>item</li>        
  <li>item</li>      
  <li>item
     <ul>
      <li>item</li>      
      <li>item</li>      
      <li>item         
    </ul>
   </li>        
  <li>item</li>       
</ol>

http://jsfiddle.net/jaxymnh8/

enter image description here

Is there a way to avoid counting ul ?

Upvotes: 1

Views: 2705

Answers (2)

Ben Kolya Mansley
Ben Kolya Mansley

Reputation: 1793

There's a very simple way to fix it. Just use a CSS child selector (>) so the count only includes <li>s that are children of the <ol>.

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

http://jsfiddle.net/jaxymnh8/1/

Upvotes: 8

Pindo
Pindo

Reputation: 1625

You need to add a counter to the sub li

so this is how you would do it 

ol,ul {
    list-style:none;
}
.count{
    counter-reset: section;
}

ol>li {
    counter-reset: subsection;
}

ol>li:before {
    counter-increment: section;
    content: counter(section) ". ";
}

ul li:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

JSFIDDLE

Upvotes: 2

Related Questions