Nested list css styling

Question

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?

Nenad Vracar · Accepted Answer · 2016-09-03 09:54:42Z

1

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>

edited Sep 3, 2016 at 9:54

answered Sep 3, 2016 at 9:47

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested list css styling

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related