I've been developing with CSS for quite a while and lately as I've started
on some bigger projects I've run into some questions. I'm hoping someone
has a addressed this before since it just seems like a major problem with
CSS development: How do you control the scope of css selectors?
For example, I have a set of pages that show tabular data and to make it all
consistent I give that table a class. After specifying all the CSS for the
table, it's rows, it's hovers etc everything works fine. However, later on
I find a page that needs to show tabular data in the same style, but needs a
slightly different layout. Instead of one row per entry, I want to display
some additional properties in a second row below the first. Within the
second row I use another group of divs and tables. The problem with the
scope of the css occurs because everything in the outer table now affects
the rows, cells, captions etc of these inner tables.
It seems like working around this should be handled in some other way than
finding each of the styles that cascade to the inner tables and resetting
them to the correct value.
Here's some code in case my words aren't very descriptive:
/* this applies to the outer (main) data table */
table.outer {
font-family:Georgia,"Gill Sans MT", "Gill sans", "Trebuchet ms",
sans-serif;
color:#5B0006;
background-color:#FFEDEF;
width:100%;
border-left:solid 1px #908F8B;
border-right:solid 1px #908F8B;
}
table.outer caption {
background-image:url(/images/mygradient-brown.gif);
color:#f6f7ee;
font-size:95%;
text-align:center;
border-top:solid 1px #908F8B;
border-left:solid 1px #908F8B;
border-right:solid 1px #908F8B;
padding:4px 0;
}
table.outer tbody th {
font-size:90%;
background-color:#FEE5E7;
color:#5C0006;
font-weight:700;
border-bottom:1px dotted #908F8B;
padding:2px;
}
table.outer tbody tr:hover, table.outer tbody tr td:hover {
background-color:#FDF9F9;
color:#000;
}
table.outer tbody td {
font-size:90%;
padding:2px;
}
Now any caption, th or td within the table of class .outer regardless where
it is in the cascading depth uses those styles.
Does anyone have any resources, ideas or experience with this issue?
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
