We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
Contact Forum Editor

Send an email to our Forum Editor:

PLEASE NOTE: Your name is used only to let the Forum Editor know who sent the message. Both your name and email address will not be used for any other purpose.

Tech Helproom

It's free to register, to post a question or to start / join a discussion


Setting link colours in CSS for certain DIVS


Likes # 0


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 :) :)

Like this post

Likes # 0

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.

Like this post

Likes # 0

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

Like this post

Reply to this topic

This thread has been locked.

IDG UK Sites

Acer Aspire R11 review: Hands-on with the 360 laptop and tablet convertible

IDG UK Sites

Apple Watch release day: Twitter reacts

IDG UK Sites

See how Framestore created a shape-shifting, oil and metal based creature for Shell

IDG UK Sites

Apple Watch buying guide, price list & where to buy today: Which Apple Watch model, size, material,?......