4 replies [Last post]
bogus
bogus's picture
Offline
Regular
Last seen: 12 years 24 weeks ago
Timezone: GMT-5
Joined: 2006-12-04
Posts: 47
Points: 3

Hi all,

I can't set the link color of inner div.
Take a look at a minimal testcase:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
 <HEAD>
  <style type="text/css">
#outer a {color: green;}
.inner a {color: black;}
  </style>
 </HEAD>
 <BODY>
  <div id="outer">
	  <div class="inner">
		  <a href="fff.php">This Text Color Should Be Black</a>
	  </div>
  </div>
 </BODY>
</HTML>

I would expect that the link color will be black, but it appears to be green.

1. Does anyone know why is this happening?
2. How can I fix it?

Thanks

bo·gus (bō'gəs)
adj.
Counterfeit or fake; not genuine: bogus money; bogus tasks.
[From obsolete bogus, a device for making counterfeit money.]

Mad-Halfling
Mad-Halfling's picture
Offline
Enthusiast
Last seen: 10 years 17 weeks ago
Joined: 2009-05-11
Posts: 90
Points: 37

Not 100%....

I'm not 100% up on the order of precedence, but it seems that the element id-match for the CSS overrides everything (at least in IE), but if you change the code to this, it works as desired - is there any reason why the outer class can't be like this?

.outer a {color: green;}
with the outer div

<div class="outer">

(sorry, couldn't post the full code as the spam filter was being overzealous

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Bogus your rulesets selector

Bogus your rulesets selector say the following:

Apply a color to any anchor that is nested at any level within the stated parent.

This applies to both.

#outer a {}

.inner a {}

both these ask that a color be applied to the anchor; the anchor is nested in both the named parents #outer and .inner

What is happening is that the ID #outer carries a higher weight (An ID trumps a class) it's rules carry a higher weight or specificity and take precedence.

http://www.w3.org/TR/CSS2/cascade.html#specificity

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 42 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Hugo

Or if you dont like how W3 explains things, Andy has a very cool star wars specificity chart that makes it super easy to understand. I have it printed in my office!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

er hmm, not sure, all those

er hmm, not sure, all those Star Wars metaphors and allusions; think i actually prefer the W3c's explanation Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me