CODEWITHSUNDEEP
htmlcss
Ryan Tibbetts
Ryan Tibbetts

Reputation: 412

Change color of lists in a CSS stylesheet

So I have some code for some ordered lists in html and I'm trying to make a stylesheet that adds in different colors for each depths added.

For instance:

<ol>
 <li>This is red</li>
  <ol>
   <li>This is blue</li>
  </ol>
</ol>

How do I do this with a CSS stylesheet?

tried something like this:

ol.a {
 color:blue;
}
ol.b {
 color:red;
}

obviously it didn't work or else I'd not be here.

Upvotes: 0

Views: 69

Answers (4)

Xahed Kamal
Xahed Kamal

Reputation: 2223

You can apply css on your ol this way - 

ol > ol:nth-child(2) {
  background-color:red;
}

ol > ol:nth-child(3) {
  background-color:blue;
}

ol > ol:nth-child(4) {
  background-color:green;
}
<ol>
 <li>This is red</li>
 <ol>
   <li>This is blue</li>
 </ol>
 <ol>
   <li>This is blue</li>
 </ol>
  <ol>
   <li>This is blue</li>
 </ol>
  
</ol>

Upvotes: 1

Yogeshree Koyani
Yogeshree Koyani

Reputation: 1643

HTML:

<ol class="a">
 <li>This is red</li>
  <ol class="b">
   <li>This is blue</li>
  </ol>
</ol>

CSS:

ol.a {
 color:red;
}
ol.b {
 color:blue;
}

Upvotes: 4

Arun Kumar M
Arun Kumar M

Reputation: 1601

Below is the correct css

ol li {
 color:blue;
}
ol li ol li {
 color:red;
}

Upvotes: 2

Nayuki
Nayuki

Reputation: 18533

Simple answer:

ol {
 color:blue;
}
ol ol {
 color:red;
}

Upvotes: 1

Related Questions