Sent by Jeff Chastain on 21 September 2005 18:06
This one has be stumped, so if somebody could point out the obvious for me, I would appreciate it.
I have a set of nested div blocks as shown below..
<div id="container">
<div class="crWrapper">
<div class="photoBlock">
<div class="crWrapper"> ... </div>
</div>
<div class="photoBlock">
<div class="crWrapper"> ... </div>
</div>
</div>
</div>
Now, in my style sheet, I have styles declared for the crWrapper div using descendent selectors as
follows ...
#container .crWrapper { border: 1px solid #f00; }
Doing this, all three div blocks with class 'crWrapper' have a red border. Now, I want to change
the border of the inner 2 blocks. I should be able to add a new line giving me the following in my
style sheet, right?
#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)?
Thanks
-- Jeff
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
