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

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

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

Reply to this topic

This thread has been locked.

IDG UK Sites

How to use an Apple Watch: Everything you need to know about the Apple Watch

IDG UK Sites

Why Scottish Tablet is better than the iPad mini

IDG UK Sites

How Microsoft's HoloLens AR headset will work without needing a computer or phone

IDG UK Sites

Apple MacBook 1.1 GHz review (Retina, 12-inch, Early 2015): The future of Apple laptops