Link Styles

Question

I am not sure if this is the right forum but here goes:
I am using jdeveloper 11.1.1.3.0 and WC 11g.
I want to style links differently depending on where they sit on a page.
Right now I havce a simple menu with four links:
<af:menuBar id="city">
   <af:goMenuItem text="find" id="gmi1">
   <etc>
</af:menuBar>I want to style the links in this menu bar but dont seem to be able to do so. I am using my own CSS rather than the trinidad CSS. I am going to be creating multiple iterations of this menu, so styling the individual links with the property inspector is not a viable option.
This is the basic CSS style I am trying to use:
.af:goMenuItem::city a {color:#800000;}
.af:goMenuItem::city a:hover {color:#ccc;}
or
.af:goMenuItem::menu-bar-item a {color:#800000;}
but I need to specify the style to thos particular class ("city") of links so the style doesn't change throughout.
Can anyone help?
Pat

Answer 1

Contain the nav bar in a wrapper with an ID.  Use descendent selectors to specifically target those links.  For example -
#nav a { color:fuchsia; }
#nav a:hover { color:heliotrope; }
Now, the only links on the page that will have these weird colors are the ones that are here -
<div id="nav">
</div>