cssstyler cssstyler - 3 months ago 9
CSS Question

Nested list css styling

I want to create css to generate the following nested list.

1. item1


  • subitem

  • subitem



2. item2


  • subitem

  • subitem



What I want is to modify the numbers (either bold or red). I searched in the internet but what I found was css for an ordered list. When I create a nested list with that css, what I obtain is extra numbers in place of the bullets. Can someone help?

Answer

You can use CSS counter only on li's that are direct children of ol with this HTML structure and then change color and font-weight.

ol {
  list-style: none;
  counter-reset: ol-counter;   
}
ol > li:before {
  counter-increment: ol-counter;               
  content: counter(ol-counter) ". "; 
  color: red;
  font-weight: bold;
}
<ol>
  <li>item1
    <ul>
      <li>sub item</li>
      <li>sub item</li>
    </ul>
  </li>
  <li>item2
    <ul>
      <li>sub item</li>
      <li>sub item</li>
    </ul>
  </li>
</ol>