Setting link colours in CSS for certain DIVS

  livewire 12:10 PM 10 Dec 10


I am trying to set the link colours for all links in a certain div. In my CSS I have the code:

#hdrTp div#parking {color:#7217e0}, .varLinks div li a:hover, #nav li a:hover, .iconLinks a:hover, #linkArea span b {color:#7217e0}

In my HTML I refer to the CSS as: div id="parking">

When I visit the website in Chrome I just get the standard blue/purple HTML colours for the hyperlink. If I right click and go "Inspect element" in Chrome it shows the correct colour in the CSS rule but it is crossed out.

After somne research this means that the stlye is being over-written by another rule. However, I dont understand how it can be as "div#parking" is unique in the CSS as no other DIVS are called "parking".

If anyone could enlighten me I would be most grateful :) :)

  adam32 01:17 AM 02 Feb 11

Check a few articles about CSS specificity and they will explain your issue. Smashing Magazine and CSS Tricks had some good introductory articles about this subject some time ago, but there are plenty others around.

On a related note, long chains like .varLinks div li a:hover should be completely unnecessary and only serve to reduce rendering performance (albeit very marginally) and make your CSS harder to maintain. Check out CSS combinators, which relate to specificity as well, actually.

Hope this helps you.

  SimpleSimon1 09:27 AM 03 Feb 11

I know you mentioned Chrome but do you use Firefox at all? If so, the easiest solution to your problem might be to simply install the [open-source]Firebug web development toolset.

Amongst it's very helpful features is one that, when you highlight an item, shows all CSS rules which affect that item, which style sheet(s) they're in and [from your point of view] most importantly, which rules are being overwritten. If your problem really is that your style is being over-written by a higher specificity rule, this will show it and tell you what the active rule actually is.

Good luck


This thread is now locked and can not be replied to.

How to watch Rugby World Cup 2015 online: Watch live, catch up on-demand & stream the 2015 Rugby…

1995-2015: How technology has changed the world in 20 years

How to watch Adobe Max 2015: See Adobe unveil new Creative Cloud features for Photoshop,…

Live Photo tips: How to take Live Photos on the iPhone 6s, how to view, share, edit and find Live…