CODEWITHSUNDEEP
javascripthtmlasp.net
Mohamad Mahmoud Darwish
Mohamad Mahmoud Darwish

Reputation: 4173

HTML List Tags - how to give each <li> diffrent color from other?

how to give each <li> different color from other on Html

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

so, Iam looking to Display Items as the Following:

Item 1 In red color

item 2 In blue color

item 3 In green color

What is the best way to do it ?

Upvotes: 1

Views: 135

Answers (2)

Rahul Tripathi
Rahul Tripathi

Reputation: 172548

Create different classes like this in css

   .redText
    {
        color:red;
    }
    .blueText
    {
        color:blue;
    }
    .greenText
    {
        color:green;
    }

And then in your html

<ul>
<li class = "redText">Item 1</li>
<li class = "blueText" >Item 2</li>
<li class = "greenText">Item 3</li>
<ul>
<ul>

JSFIDDLE DEMO

Upvotes: 2

Sanshayan
Sanshayan

Reputation: 1076

Try style component for each list.

<ul>
<li style="color:red">Item 1</li>
<li style="color:blue">Item 2</li>
<li style="color:green">Item 3</li>
</ul>

Upvotes: 0

Related Questions