Help with changing the color of links in the sidebar but not on the site content

Well, I am using the default TicTac template that came with my MODx. I changed the colors of all of the pieces to blue, and now when I change the CSS of the template of the links, it changes all the links on the site.
So, I have:
a, a:link {

text-decoration: none;

color: #ffffff;

border-bottom: 1px dotted #69c;

}

a:visited { color: #ffffff }

a:hover { color: #69c; border-color: #69c; text-decoration: none; }

a:active { color: #ffffff; border-color: #ffffff}


Which is what I want for the sidebar links. But for the main website content links I want:

a, a:link {

text-decoration: none;

color: #69c;

border-bottom: 1px dotted #69c;

}

a:visited { color: #69c; border-color: #69c; }

a:hover { color: #69c; border-color: #69c; text-decoration: none; }

a:active { color: #69c; border-color: #69c}




So any and all help is appreciated. Sorry if this is a dumb question, or if it is posted in the wrong section. I had asked a few friends and they told me it was not possible to change.... So please help. Thanks.

This is a CSS question but the answer is that to change links contextually you need to use the cascade.

You want to change the behaviour of the sidebar links so select the id or class of the sidebar container and then make your css like so:


Where #sidebar would be the ID of the sidebar but it could be a class. I didn’t look at the template but this is fairly simple CSS.

Whenever you want to control the elements within a container such as a div you can set a class or id for the div and use it to selectively style elements within the parent and have no effect on sibling or parent containers or their subelements.