# 3 Lists - 3 Colors

**URL:** <https://forum.kirupa.com/t/3-lists-3-colors/644875>\
**Category:** Uncategorized\
**Created:** [November 7, 2020, 4:22pm UTC](https://forum.kirupa.com/t/3-lists-3-colors/644875 "2020-11-07T16:22:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 7, 2020, 4:22pm UTC](https://forum.kirupa.com/t/3-lists-3-colors/644875/1 "2020-11-07T16:22:28Z")

</div>

![Screen Shot 2020-11-07 at 9.18.56 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/2/27e943f61de5413cc01c82ac9e506469c0c81f44.png)

```
<html>
<head>
  <title>Car Dealers in Whitehorse</title>
  <style>
    h1{color: rgb(51, 156, 24);}
    h2{color: rgb(199, 55, 134);}
    p{color: rgb(85, 123, 194);}
   ol{color: green;}
   ul{color: darkorange;}
  </style>
</head>
<body>
  <H1>Toyota of Whitehorse</H1>
  <h2>Service Department</h2>
  <p>The service folks are available from <br>
   <strong>Monday - Friday</strong> <br>
    <em>with the exception of holidays</em>
  </p>
  <button>Click To Contact Us</button>
  <li>tires</li>
  <li>lube jobs</li>
  <li>brakes</li>
<ul>
  <li>detailing</li>
  <li>polishing</li>
  <li>wiring</li>
<ul> <br>
<ol>
  <li>red</li>
  <li>pink</li>
  <li>blue</li>
</ol>
</body>
</html>

```

Here

I am playing with the basics of CSS. I have my colors for my  
- ordered list (green)  
- unordered list (dark orange)  
In addition to the 2 above lists, I also have these 3 lines

- tires
  
- lube jobs
  
- brakes
  
which I want to be in Indian Red but when I target these lines with this code

li{color: indianred;}

all three of my lists become Indian Red so my question is - if I am happy with the colors  
for my ordered list and unordered list, how can I assign a different color for my 3 entries  
that are not in the ol or the ul ?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 7, 2020, 11:06pm UTC](https://forum.kirupa.com/t/3-lists-3-colors/644875/2 "2020-11-07T23:06:49Z")

</div>

You can scope your styles to target only a subset of your items. There are several ways to do that, and this article I wrote a long time ago walks you through the approaches: [https://www.kirupa.com/html5/css\_selectors\_type\_class\_id.htm](https://www.kirupa.com/html5/css_selectors_type_class_id.htm)

🙂

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 8, 2020, 4:31pm UTC](https://forum.kirupa.com/t/3-lists-3-colors/644875/3 "2020-11-08T16:31:32Z")

</div>

A really really good article. I now have a much better grasp of selectors as a result. Thank you.

So a question arises nevertheless. I can see that a Class Selector for a situation like -

* * *

```
<ul>

<li class="cool">Uno</li>

<li class="cool">Dos</li>

<li>Tres</li>

<li>Catorce</li>

</ul>

```

* * *

will give you infinite control line by line as to the style you wish to apply but what is the deal with the ID Selector in this situation below -

* * *

```
<div id="spaceship">

<p>Do or do not...there is no try.</p>

</div>

```

* * *

for this example, as it is written, it would have been simpler to forget the ID Selector altogether since there is only 1

tag and it would have been a case of using the p selector. So the advantage must be in a situation where there are a lot of

tags within the

 tags and in that case applying an ID selector enables applying the style to all those 

elements simultaneously. Is this the way to think about the difference between the Class and the ID selectors? Anyway, a very nice tutorial to sort out these fine details of selectors.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [November 8, 2020, 4:39pm UTC](https://forum.kirupa.com/t/3-lists-3-colors/644875/4 "2020-11-08T16:39:26Z")

</div>

sorry - I am forgetting to use the preformatting text button so in the previous post the tag symbols didn’t come through - let me try again to give you the full text of my note -

## A really really good article. I now have a much better grasp of selectors as a result. Thank you. So a question arises nevertheless. I can see that a Class Selector for a situation like -

```
<ul>

<li class="cool">Uno</li>

<li class="cool">Dos</li>

<li>Tres</li>

<li>Catorce</li>

</ul>

```

* * *

will give you infinite control line by line as to the style you wish to apply but what is the deal with the ID Selector in this situation below -

* * *

```
<div id="spaceship">

<p>Do or do not...there is no try.</p>

</div>

```

* * *

for this example, as it is written, it would have been simpler to forget the ID Selector altogether since there is only 1 `<p>` tag and it would have been a case of using the p selector. So the advantage must be in a situation where there are a lot of `<p>` tags within the `<div>` tags and in that case applying an ID selector enables applying the style to all those

elements simultaneously. Is this the way to think about the difference between the Class and the ID selectors? Anyway, a very nice tutorial to sort out these fine details of selectors.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 8, 2020, 10:54pm UTC](https://forum.kirupa.com/t/3-lists-3-colors/644875/5 "2020-11-08T22:54:48Z")

</div>

I believe you meant to say “there is only 1 `<div>` tag”. If so, you are right. This example could have just been done using an element/type selector targeting just `<div>` 🙂

That is good feedback as I mark this article for revising in the near future.

🔖