Fri, 2009-07-17 10:41
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
Fri, 2009-07-17 10:58
#1
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
Fri, 2009-07-17 11:24
#2
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.
Fri, 2009-07-17 16:32
#3
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!
Fri, 2009-07-17 18:14
#4
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 