How to change text color of <li> item only using inline style?-CodePudding

I want to change the color of a list tags but I can only use inline style, any idea how to do it once, insted of writing inline style for each li tags. (No JS or Style tags)

CodePudding user response：

you can simply do this

<ul>
  <li style="color: red;">li item</li>
  <li style="color: green;">li item</li>
  <li style="color: blue;">li item</li>
</ul>

CodePudding user response：

Most of the answers currently here use JS or the style tag.

The secret is that if you just want to change the text color, all you have to do is add that property to the parent element one time and it will apply to all of them.

This can be done either to the ul tag, or you can surround all of the li tags that you want to update with a span tag and change the inline style color property of that (this is usually how it's done).

CodePudding user response：

Try this

<ul>
  <li style="color: red;">Item 01</li>
  <li style="color: green;">Item 02</li>
</ul>

You can also use hex color codes as well.

<ul>
  <li style="color: #ff0000;">Item 01</li>
  <li style="color: #00ff00;">Item 02</li>
</ul>

Without writing each line of li tags, you can wrap your li tags within ul tag and add style for ul tag like this.

<ul style="color: #ff0000;">
  <li>Item 01</li>
  <li>Item 02</li>
</ul>

CodePudding user response：

You can use all the li tags using the tag selector in the CSS. You need to write as this:

<style>
li {
color: red;
}
</style>

CodePudding user response：

in your style tag, select li

<style>
  li{
    color:red;
  }    
</style>

CodePudding user response：

If using javascript:

<!DOCTYPE html><html><body>
<ul>
  <li>I am a paragraph.</li>
  <li>I am a paragraph.</li>
  <li>I am a paragraph.</li>
</ul>

<button onclick="myFunction()">Change color</button>

<script>
function myFunction() {
  const nodes = document.getElementsByTagName("li");
  for (let i = 0; i < nodes.length; i  ) {
    nodes[i].style.color = "red";
  }
}
</script></body></html>