Ways to modify the color of a particular list item

Question

Ways to modify the color of a particular list item

I am looking to change the color of only the items in a list that contain a number to blue.

Specifically, I want to target the first list (the ol li) that starts 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 attempted this approach but unfortunately, all the lists ended up changing color to blue.

html css

Answer 1

Answer №1

If you want to reset the color on nested lists, you can utilize the initial property.

The reason for using initial is that color gets inherited in descendant elements.

/*Select only the list items that are direct children of an ordered list*/
ol>li {
  color: blue;
}


/*Select list items in an unordered list that are descendants of an ordered list */
ol ul>li {
  color: initial;
}

<ol>
  <li>League 1<br>
    <ul type="circle">
      <li>Goals</li>
      <li>Top Goals
        <ul type="a">
          <li>...</li>
          <li></li>

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

  </li>
  <li>League 2</li>
  <li>Cup</li>
</ol>

Additionally, it's crucial to understand the distinction between the child combinator and the descendant combinator

Answer 2

If you want to reset the color on nested lists, you can utilize the initial property.

The reason for using initial is that color gets inherited in descendant elements.

/*Select only the list items that are direct children of an ordered list*/
ol>li {
  color: blue;
}


/*Select list items in an unordered list that are descendants of an ordered list */
ol ul>li {
  color: initial;
}

<ol>
  <li>League 1<br>
    <ul type="circle">
      <li>Goals</li>
      <li>Top Goals
        <ul type="a">
          <li>...</li>
          <li></li>

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

  </li>
  <li>League 2</li>
  <li>Cup</li>
</ol>

Additionally, it's crucial to understand the distinction between the child combinator and the descendant combinator

Answer 3

Answer №2

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

<ol>
  <li><span>Example</span><li>
</ol>

Answer 4

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

<ol>
  <li><span>Example</span><li>
</ol>

Ways to modify the color of a particular list item

Answer №1

Answer №2

Similar questions

Avoid button wrapping in Bootstrap 4 navbar

Bizarre Drop-down Peculiarities

Updating view with *ngIf won't reflect change in property caused by route change

Animation effect in Jquery failing to execute properly within a Modal

How can I customize the variables in Webpack for Sass and Foundation?

The functionality for selecting text in multiple dropdown menus using the .on method is currently limited to the first dropdown

Ways to enlarge the font size of text on a mobile website?

Fieldset is not adhering to the height of its parent

What is the best way to choose a range of nodes with dynamic limitations without relying on static positions?

Difficulty encountered when positioning a container using BootStrap 4

What is the best way to include some white space around a paragraph?

What are some solutions for resolving the problem with the anchor attribute in Safari?

Reduce the height of the tabs bar in the Gnome terminal

Using CSS3 to Enhance the Look of Multiple Background Images

Extract particular details from my database

Combining two arrays in JavaScript and saving the result as an XLS file

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Show the jQuery code block as HTML within a textarea

Concealing just the portion of an element that moves underneath a fixed see-through navigation bar

Adjust the navigation height to be proportional to the main content size