Use the descendant selector :
#sidebar a:link{ color:#134896; } #sidebar a:visited{ color:#330033; } #sidebar a:hover{ color:#942A5F; } #sidebar a:active{ color:#6FB25C}
This is a basic css type selector, and you can link as many descendant selectors as you want, i.e.:
#content .navigation .header h1.red { }
This will match any <h1 class="red"> that is a descendant of an element with a header class, which is a descendant of an element with a navigation class, which is a descendant of an element with id content .
Descendant selectors are one of the few selector types that really works in browsers, so you can rely on them. It should be noted that you should have as few selectors as possible to achieve the goal, as this will increase productivity. Also, try not to specify the type of the element if you can avoid it (this contradicts the recommendations for JavaScript selectors), as it will bind your css to what html looks like now. The developer may decide to change a <span class="highlight"> to <em class="highlight"> later, which will break span.highlight -selector, while .highlight -selector will continue to work.