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 <a href="#">link</a>
        <div class="innerdiv">
            INNER DIV <a href="#">link</a>
        </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;}