ansaurus

Question

CSS & Overriding Styles on Nested Elements

Answer 1

+1 A:

Yes. The "table table" rule will override the "table" rule because it's more specific. What you described is the best way to have one style for the outermost table and another style for inner tables -- assuming neither table has a class or ID that would allow you to use more semantic selectors.

In practice, you're more likely to need to use this technique with lists.

ol { list-style: upper-roman }
ol ol { list-style: upper-alpha }
ol ol ol { list-style: lower-roman }
ol ol ol ol { list-style: lower-alpha }

Patrick McElhaney 2009-04-21 18:30:48

Answer 2

+1 A:

Add a class or id to the outer table:

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
  <table class="outer"> 
  <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
  </tr> 
  </table>     
</body>

See it here

If you can't add id's or classes to the HTML and assuming the table you want to style is not within another table, you could style it by specifying what element is is a child of:

div > table {border: dashed 1px #333333;}

See it here

Although that selector was only implemented in IE7 so if you need to support IE6 you will have to use the override method from the question.

Sam Hasler 2009-04-21 18:36:26

That's not always feasible Sam. There are certain scenarios where you're dealing with server side controls that spew out the HTML where having to add IDs/Classnames might mean writing some fiddly OnRender code to tack it on. I'm talking about the best practice way to provide overrides at different nesting levels when there are no #IDs/.ClassNames to filter by

Eoin Campbell 2009-04-21 18:41:05

Added a way to do it without adding to the HTML, but until IE6 falls out of used it might be some time before we can call it standard practice.

Sam Hasler 2009-04-21 19:14:21

Answer 3

+3 A:

If you have HTML like this:


<html>
  ...
  <body>
    <div>
      <div>
      <div>
    <div>
  </body>
</html>

You could apply styles only to the div that is child of the body element using the child selector (>) like this:


body > div
{
  border:solid 1px orange;
}

The nested div will not get a border.

For more information please visit: http://www.w3.org/TR/CSS2/selector.html#child-selectors.

Please note that Internet Explorer 6 does not support the child selector.

knut 2009-04-21 18:43:20

aha this is closer to what I had in mind.So you could specify "top level site styles" That would be applied to the main structures of the site, without worrying about screwing up the contents of those elements. Thanks knut

Eoin Campbell 2009-04-21 18:48:10

Answer 4

A:

I would agree with your initial idea on this one however it does depend on the circumstance.

Always create the base rule and add to the stylesheet with exceptions to that rule.

For example if you are sure that a table within a table will definately never need the same style applied to it then use the "table table" selector to set the style. If however that may only occur once then set a class on the parent table and amend your "table table" selector to be something along the lines of "table.parent table".

However "parent" should be changed to a descriptive name for the element, like calendar as that is what it is. You should not name a class after a particular style because if the style changes it makes no sense any longer.

John_ 2009-04-21 18:54:12

ansaurus

tags:

views:

answers:

CSS & Overriding Styles on Nested Elements

related questions