Previous Message
Next Message

Weird inheritance issue?

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/
Previous Message
Next Message

Message thread:

Possibly related: