Jeff Chastain wrote:
<div id="container">
<div class="crWrapper">
<div class="photoBlock">
<div class="crWrapper"> ... </div>
</div>
<div class="photoBlock">
<div class="crWrapper"> ... </div>
</div>
</div>
</div>
#container .crWrapper { border: 1px solid #f00; }
.photoBlock .crWrapper { border: 1px solid #00f; }
When I do this, all three blocks still have a red border. The weird
thing is that if I change the 'class="photoBlock'" to
'id="photoBlock"' and update the styles accordingly, I have red and
blue blocks. Why does this not work for a class, but will work for
an id (which I can't use as there are multiple 'photoBlock's)?
The cascade is working perfectly. You can review the general rules
here <http://www.w3.org/TR/CSS21/cascade.html#cascade>, and more
specifically to your problem here:
<http://www.w3.org/TR/CSS21/cascade.html#specificity>. It should be
obvious once you read those that #container .crWrapper will always
apply in preference to .photoBlock .crWrapper. So just make the
second selector more specific by including the container as part of
that selector, too. I.e. use these:
#container .crWrapper {rule}
#container .photoBlock .crWrapper {rule}
Now the selector with .photoBlock will always apply, regardless of
cource order.
HTH,
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
