Question

I can’t seem to get this working…I have few menu items that need different background items from the global setting.

Here is the global setting which works just fine…

#left #current a {background-image: url(../images/leftbuttonactive.png); color: #000;}

BUT I need to apply a different background image to some items which are 2 lines of text, hence .itemxxx. Each line below is what I have tested, of which none work.

#left #current .item136 a,
.item136 #current a,
#current .item136 a,
#current .item136 > a,
#left #current .item136 a:link,
#left ul li.item136 li.active a:link,
#left #current .item136 a,
#left li.item136 #current a,
background-image: url(../images/leftbutton2lineactive.png);}

This works just fine for :hover or :visited…

#left li.item136 a:hover

I have tried quite a few variations (as you see in code 2) but have had no luck. Suggestions?

Answer 1

If #current is also a li and may have class item136:

#left .item136 a, #left #current.item136 a {
    background-image: url(../images/leftbutton2lineactive.png);
}

Notice #current and .item136 are attached without a space in between; this asks your browser to select an element if it has both ID and class. You’ll need to specify that because an ID selector alone is more specific than a class selector alone, and your ID style will override the class style.