CSS inheritance problem

I normally dont have problems like this but I cant get it working.

I have a css file that has global hyperlink styles, ie:

a, a:visited, a:active {
background-color: transparent;
color: #000;
text-decoration: none;
}

So all links on the entire site are in this style.

However I want to change the style of links in ONE of my div's. I insert this style further down the css file:

#divname a {
color: #0000ff;
text-decoration: underline;
}

But it will not apply the style to that div, instead it remains as the global style.

Any ideas?

 

I'm just taking a guess since you didn't post any of the HTML but are you sure the div in your markup has an ID and not a CLASS?

 

Yep it was ID

I ended up just making a new DIV for those links and it worked

 

a:link is more specific CSS-wise than simply a. The more specific something is, and whatever comes later in the CSS file, will generally override more global things.

The more names you have, the more specific it is. Id's add the most weight, followed by classes and pseudo-classes (yeah, Dan will say :link etc are pseudo-elements and not pseudo-classes but this is what I learned). Listing said div after the globals helps, since generally a:visited {color:#000;} a:visited{color:#fff;} will mean the visited ones are white (fff) not black (000) simply because the white was named afterwards.

Like if it's not a list and you have the div:
<div id="divname">
<p>text and stuff <a href="#">linkitty link link</a> more text</p>
</div>
You could either try
#divname p a {whatever;}
or
give a class to the a in the above html like <a class="woohoo" href="#">linkitty link link</a>
#divname a.woohoo { whatever;}

Eh, for in the future since you solve this one : )