how to apply same declaration to many different objects?

I'm doing some hacks in CSS to accommodate our old template infrastructure in a new layout. Our menu has an 'active' state, correspondingly to the section I'm in.

Trying to accomplish this I wrote:

div#left-col ul li.cidades.Cidades a, div#left-col ul li.amizade.Amizade a, div#left-col ul li.encontros.Encontros a,div#left-col ul li.idade.Idade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

but it just don't work! the style is applied to only one of the elements. and I ended up writing this code to correct the problem:

div#left-col ul li.cidades.Cidades a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.amizade.Amizade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.encontros.Encontros a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.idade.Idade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

But I don't understand the problem nor the solution....

EDIT: here is the HTML code I'm trying to apply this style:

<div id="left-col">
<ul>
<li class="amizade Idade"><a href="#">Amizade</a></li>
<li class="cidades Idade"><a href="#">Cidades</a></li>
<li class="encontros Idade"><a href="#">Encontros</a></li>
<li class="idade Idade"><a href="#">Idade</a></li>
</ul>
</div>

Note that I want to have the style applied only when 2 repeated words appears in a class.

EDIT 2:

I solved the problem by moving the correct declarations (the ones with the many elements followed by commas) above this one:

div#left-col ul li a{outline: 0px dashed red;display:block; background:transparent ur开发者_Go百科l(menu-esq-a.png) no-repeat scroll 0px -4px; height:22px; padding:8px 0 0 23px; margin:0; font-family: Arial, Sans-serif; font-weight: bold; font-size: 14px; text-decoration:none; color:#00574a}

which was supposed to be the "default" status for my 's. Weird, since I thought the most specific declaration would won over the lesser.

---

You already have a common css class applied to all items (it's Idade, and it's a part of each element's class atttribute).

This means that it is sufficient (and recommended) to declare the style for that class only:

div#left-col ul li.Idade {
   display:block;
   background:transparent url(/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
   color:white;
   width: 166px;
}

As a side note, a different name may be more appropriate for a common class, since only one of your elements' contents matches this name. Name like menuItem would be much more descriptive than Idade IMO.