Question

How do I prevent CSS from applying my styles do descendants of descendants without giving them classes or ids? e.g.

#mycontent table {border: 1px solid red;}

Will style the correct table, and then ALL tables inside that one too. All I want is the first table to be selected, not all the subtables.

Answer 1

What you describe is not the cascade, it is simple selector matching.

There are a few approaches that you could take.

The first is to use a selector that is more specific. If the table you want to style is a child (rather than a grandchilder or other deeper descendent) then you can use a child selector instead of a descendent selector. This is not supported in MSIE 6.

#mycontent > table { border: 1px solid red; }

The second is to add more information to the tables you actually want to style (with an id or class).

#mycontent table.tableThatIWantToStyle {}

The third is to make use of the cascade and style the deeper descendants differently.

#mycontent table { border: 1px solid red; }
#mycontent table table { border: none; }

That said, if you have tables inside tables then the odds are that you are abusing them for layout – which is wrong – and you should fix your markup instead.