how to apply same declaration to many different objects? - html

Question

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">Amizade</li>
<li class="cidades Idade">Cidades</li>
<li class="encontros Idade">Encontros</li>
<li class="idade Idade">Idade</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 url(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.

Answer 1

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.