CSS & Overriding Styles on Nested Elements

html css styles

34,233

Solution 1

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.

Solution 2

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 }

Solution 3

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.

34,233

Author by

Eoin Campbell

Husband/Dad @ Home, Senior Technical Architect @ ChannelSight, Photographer & Gamer in my spare time. I keep an irregularly updated blog @ http://trycatch.me/

Updated on July 09, 2022

Comments

Eoin Campbell almost 2 years
This came up from another question that was asked here but I figure it's something that probably has a "Best Practice" Approach.

When designing a website, the designer will most likely put together a set of generic styles for all elements within a website. (Standard Fonts for Text in Divs/Spans/H1/H2s)

In the case of tables, they may be defining default sitewide borders and alignments as well... e.g.
```
Table
{
   border: dashed 1px #333333;
   padding: 2px;
}
```
However if you have a table within a table (from RSolberg's example, an AJAX Calender within a DataGrid) then both your parent & nested tables will both inherit these styles. (Suppose that's why they're called Cascading)

My question is what's the best practice for applying styles to top most elements without having sub-elements also inherit them.

Should you just provide an override which undoes whatever styling you've applied.

e.g.
```
Table
{
   border: dashed 1px #333333;
   padding: 2px;
}

Table Table
{
   border: solid 0px #000000;
   padding: 0px;
}
```
- Eoin Campbell about 15 years
  
  I know both these solutions will work guys. I'm just wondering from a Html/Css designers point of view what's best practice. I assume there no magical CSS Flag that says "Apply N levels deep & stop"
Eoin Campbell about 15 years

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 about 15 years

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
Smilediver about 15 years

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.