How to change color of a specific list-CodePudding

I wanna be able to change colors of only the items of the list that has a number in it to blue, here i included a pic of my list my list

<ol>
        <li>League 1<br>
            <ul type="circle">
                <li>Buts</li>
                <li>Buts top
                    <ul type="a">
                        <li>...</li>
                        <li></li>
                        
                    </ul>
                </li>
                <li>Stats</li>
            </ul>
    
        </li>
        <li>League 2</li>
        <li>Coupe</li>
     </ol>´

I basically only want to change the list the color of my first list ( the ol li ) meaning the list that start with a number in it.

i tried this but it didnt work, all the lists changed color to blue as you see in pic :

<style>
        ol li{
            color: blue;
        }



    </style>

thanks to anymore who can help

CodePudding user response：

You can use initial to reset the color on the nested lists.

Why do we need to use initial? Because color is inherited in descendant elements.

/*Target just the list items that are children of ol*/
ol>li {
  color: blue;
}


/*Target list items in an ul that is a decendant of ol */
ol ul>li {
  color: initial;
}

<ol>
  <li>League 1<br>
    <ul type="circle">
      <li>Buts</li>
      <li>Buts top
        <ul type="a">
          <li>...</li>
          <li></li>

        </ul>
      </li>
      <li>Stats</li>
    </ul>

  </li>
  <li>League 2</li>
  <li>Coupe</li>
</ol>

On a side note it is important to know the difference between the child combinator and the descendant combinator

CodePudding user response：

In CSS, the li element is a child of the ol element, so applying a style to the li element will affect all li elements within the ol element. To change the color of only certain items in the list, you can create a class for those items and apply the style to that class instead. For example:

    <style>
   .blue-item {
     color: blue;
   }
</style>

<ol>
  <li>Item 1</li>
  <li >Item 2</li>
  <li>Item 3</li>
  <li >Item 4</li>
  <li>Item 5</li>
</ol>

Create classes with colors according to your needs. Hope this helps :)

CodePudding user response：

<style>
 ol li span {
   color: blue;
 }
</style>

<ol>
    <li><span>Something</span><li>
</ol>