CODEWITHSUNDEEP
csshtml-listsnested-lists
usercs
usercs

Reputation: 143

Nested list css styling

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

1. item1

2. item2

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?

Upvotes: 2

Views: 1811

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 1

Related Questions