css nesting problem - css

Question

I want the links inside of the second, nested div to have red text.
Dulled down CSS:
#outerdiv{ padding:10px; background-color: #ddd;}
#outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
Dulled down HTML:
<div id="outerdiv">
OUTERDIV link
<div class="innerdiv">
INNER DIV link
</div>
</div>
JSFiddle: http://jsfiddle.net/5S6ez/1/
How can I make my innerdiv links have red font?
My link keeps as much of its grandparents' styles as possible even though it has new styles applied to it that occur later in the CSS file. Why?

Answer 1

The problem is that the id based selector is more specific than the class-name based selector, to change that, use:
#outerdiv .innerdiv a:link{ color: red; background-color:White;}

Answer 2

Try making the outerdiv classes instead of ids. Like this:
.outerdiv{ padding:10px; background-color: #ddd;}
.outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
If that is not an option (outer div must be an id), then you can try to make the innderdiv rules more specific to the outerdiv, like this:
#outerdiv .innerdiv{ padding:10px; background-color: #aaa;}
#outerdiv .innerdiv a:link{ color: red; background-color:White;}
Also, I was recently introduced to this article, and it really has helped me a lot with CSS in general:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 3

Use a, not a:link.
:link is a pseudo-class for unvisited links.
Also, just for a heads up that may help you with other things, keep in mind that a tags are also inline elements and not to style them with padding, etc unless you set "display: inline-block" or "display: block". Yeah, a bit more than you asked but still can be helpful.