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 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/
