Setting link colours in CSS for certain DIVS

  livewire 12:10 10 Dec 2010


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 02 Feb 2011

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 03 Feb 2011

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.

Elsewhere on IDG sites

The Evil Within 2 review-in-progress

InVision Studio takes on Adobe XD and Sketch

Camera tips to take better iPhone photos

Comment transformer un iPhone en borne Wi-Fi ?