wrongusername
wrongusername

Reputation: 18918

CSS overriding subsequent attributes

Say I have a div for the main body text of a webpage, and a navigation div for links to the rest of the website. Now say I want the links in the body text to be green instead of the usual blue, but I want the links in the navigation div to be yet another color, perhaps red. If I make links green in CSS, then all the links will be green. If I make the text in the navigation div red with CSS, the link attributes seem to override the div's attributes for links in the navigation div. How can I target only certain links when no links have any classes attached to them?

Upvotes: 0

Views: 124

Answers (2)

xaxxon
xaxxon

Reputation: 19761

Because of CSS specificity (I love that word) rules, JMC's suggestion works.

Read more about that here: http://htmldog.com/guides/cssadvanced/specificity/

Basically, the more specific the rule is, the more likely it is to be used.

Upvotes: 3

JakeParis
JakeParis

Reputation: 11210

Use descendant selectors.

Style regular links, then only links within the #nav div:

a:link { color: blue; 
    }
a:visited { color: purple;
    }

.navigation a:link, .navigation a:visited { color: green
    }

Upvotes: 2

Related Questions