Div Unique CSS Style Links

Question

I want to create unique styles for my links in a single particular div (So for example I want all links bold and red in the main body, but in the sidebardiv I want them blue and italic) How do I go about it?

I have:

a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}

however if I put that in the sidebar div section it messes up my }'s

Answer 1

Use descendant selectors:

#sidebar a:link{ color:#134896; } 
#sidebar a:visited{ color:#330033; } 
#sidebar a:hover{ color:#942A5F; } 
#sidebar a:active{ color:#6FB25C}

This is a fundamental css selector type, and you can chain as many descendant selectors as you wish, i.e.:

#content .navigation .header h1.red {
  /* Properties */
}

This would match any <h1 class="red"> that is a descendant of an element with class header, that is a descendant of an element with class navigation that is an descendant of the element with id content.

Descendant selectors is one of the few selector types that actually works across browsers, so you can rely on them. It should be noted that you should have as few selectors as possible to achieve your targetting, as this will be a performance boost. Also, try not to specify the element type if you can avoid it (this is contradictory to the advice for JavaScript selectors), since it will tie your css to how the html looks now. A developer can decide to change a <span class="highlight"> to an <em class="highlight"> later, which would break a span.highlight-selector, while a .highlight-selector would continue to work.

Answer 2

a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }