Can CSS Make One DIV's Anchor Color Different Than Another?

October 19, 2004 5:30 PM

I'm stumbling through css. Is there a way through CSS to make anchor color in one div different than anchors in another div? I have a div class="menu" - with links in that div, that I want to be a different color than the other links on the page - I have tried .menu:link {color:#660000;} but that doesn't seem to be working. Anyone?
posted by TuxHeDoh to Computers & Internet (4 answers total)

foo bar {baz: 0}

means all bars inside a foo. So:

div.menu a:link {color: #660000;}
posted by kindall at 5:37 PM on October 19, 2004

yeah, if you have two divs, say div class="nav" and div class="content" with links in each, and you want the nav links to be red and the content links to be blue, here's what you would use for css (you could do a:link, hover, etc, I'm just using shorthand to change all link colors in a region):

.nav a {color:red;}
.content a {color:blue;}

and don't bother putting a class on the links in each area, the css rules will "cascade" down to the correct objects
posted by mathowie at 5:41 PM on October 19, 2004

What kindall and mathowie said, along with pointing out that the tag you're trying to style is the <a> tag. The ":link" part is just one of its behaviors. If you want to style links, you need to apply the style to <a>.
posted by gleuschk at 7:08 PM on October 19, 2004

Also, don't forget your "visited", etc. Here's one example:

.nav A:link {color: red; text-decoration: none;}
.nav A:visited {color: red; text-decoration: none;}
.nav A:active {color: red; text-decoration: none;}
.nav A:hover {color: gray; text-decoration: underline; color: red;}

.content A:link {color: blue; text-decoration: none;}
.content A:visited {color: blue; text-decoration: none;}
.content A:active {color: blue; text-decoration: none;}
.content A:hover {color: gray; text-decoration: underline; color: blue;}
posted by taz at 12:06 AM on October 20, 2004