How to add colour classes to this css

Question

I'm basically looking to add colour classes to what I have below. I'm going to be adding more colours so this way obviously won't work for me while being clean. I tried adding in the class below to add to my li's but doesn't seem to work. The css and html are below that.

#content ul.icon-text li .orange {
    background-color:#f37028;
}

-------------------------------

#content ul.icon-text {
    width:100%;
    height:2.1vw;
    list-style:none;
    float:left;
    padding: 0;
    margin: 1% 0 0 0;
    background-color:#f37028;
    text-transform:uppercase;
    text-align:center;
}

<ul class="icon-text">
<li>...</li>
</ul>

Answer 1

If I understood correctly you are trying to create COLOR classes

.orange {
    background-color:#f37028;
}
.silver {
    background-color:#ccc;
}

and so on...

<ul class="icon-text">
  <li class="silver">...</li>
  <li class="orange">...</li>
</ul>

also possible

<ul class="icon-text orange">
  <li>...</li>
  <li>...</li>
</ul>

I am not sure if that is what you were asking...

Best of luck, let me know if that is not it so I can delete it :)...

Answer 2

Remove the .orange

should be #content ul.icon-text li

Answer 3

you defined the .orange class but you didn't use it in your HTML code.

#content ul.icon-text li.orange {
    background-color:#f37028;
}

as per the HTML code you given here should use this line of code.

ul.icon-text li {
    background-color:#f37028;
  display:block;
  margin:4px;
}

if you want each <li> should be in orange color then you can define the class .orange and apply to specific li .

A Working Demo Link. http://jsbin.com/xagevava/1/edit

Answer 4

Working Fiddle

Since your css is taking #content is the parent, your html structure should also involve #content in it to see the orange background for li.

<div id="content">
<ul class="icon-text">
<li class="orange">...</li>
</ul>
</div>