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


livewire

Likes # 0

Hi,

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
SimpleSimon1

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
adam32

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

LG G Watch R video review: The most desirable Android Wear smartwatch

IDG UK Sites

Apple's 2014 highlights: the most significant Apple news of 2014

IDG UK Sites

2015 creative trends: leading designers & artists reveal the biggest influences & changes coming th)......

IDG UK Sites

Ultimate iOS 8 Tips: 35 awesome and advanced tips for using iOS 8 on iPhone and iPad