How to change color of a specific list

Question

I wanna be able to change colors of only the items of the list that has a number in it to blue.

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.

ol li {
  color: blue;
}

<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 tried this but it didnt work, all the lists changed color to blue.

Welcome to Stack Overflow! Please **DO NOT POST IMAGES OF CODE**. Please paste your code directly into the question. Use the `<>` stack snippet tool to add your HTML and CSS. Also, CSS cannot do this. It is content unaware - meaning it cannot read your text and change the color based on the text. — disinfor, Dec 06 '22 at 22:46
Does this answer your question: https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text — disinfor, Dec 06 '22 at 22:48
thank you sir i edited my post. im not sure this is the answer im looking for because what I meant is that in my code there are multiple types of lists there are ol li, then ul li, then ul "type a"li, im not able to change the color of just the first type ? — nigeria, Dec 06 '22 at 22:52
If that's the case, update your post with your HTML as well, and tell use exactly what you want changed - in your question, not the comments. — disinfor, Dec 06 '22 at 22:54

Jon P · Answer 1 · 2022-12-06T23:30:59.273

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

WTellos · Answer 2 · 2022-12-06T23:13:05.170

0

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

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

edited Dec 06 '22 at 23:13

answered Dec 06 '22 at 23:05

WTellos

19
5

How to change color of a specific list

2 Answers2