CODEWITHSUNDEEP
cssnested
rlb.usa
rlb.usa

Reputation: 15043

css nesting problem

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>

enter image description here

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?

Upvotes: 2

Views: 155

Answers (3)

user470714
user470714

Reputation: 2888

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/

Upvotes: 1

Shawn Khameneh
Shawn Khameneh

Reputation: 472

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.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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;}

Upvotes: 2

Related Questions