Forum Moderators: not2easy
.LoginTable { }
.BillingTable { }
.LoginTable .Col1 { width: 200px; }
.LoginTable .Col2 { width: 400px;}
.BillingTable .Col1 { }
.BillingTable .Col2 { }
The thing I am noticing is that my .BillingTable .Col1 is rendering the width of .LoginTable .Col1.
My understanding was that since .LoginTable .Col1 and .BillingTable .Col1 are specifically assigned via a contextual selector, the values shouldn't be inherited. Can someone clarify this concept and what's actually happening here?
The billing table doesn't happen to reside inside the login table, does it?
The code is essentially as follows:
<style type="text/css">
.LoginTable { }
.BillingTable { }
.LoginTable .Col1 { width: 200px; }
.LoginTable .Col2 { width: 400px;}
.BillingTable .Col1 { }
.BillingTable .Col2 { }
</style>
<table class="LoginTable">
<tr>
<td class="Col1">Login Name:</td>
<td class="Col2"><input type="text" name="LoginName"></td>
</tr>
</table>
<table class="BillingTable">
<tr>
<td class="Col1">First Name:</td>
<td class="Col2"><input type="text" name="FirstName"></td>
</tr>
</table>
My thought was that despite that fact that the td tags are both assigned the same class name, since they are assigned specifically with their respective parent tables, they should be completly independent.
But, that doesn't seem to be the case. Thoughts?
Maybe nesting does have something to do with it?
The following code actually exhibits the effect that I am noticing:
<style type="text/css">
.LoginTable { }
.BillingTable { }
.SpanCol { }
.LoginTable .Col1 { width: 200px; }
.LoginTable .Col2 { width: 400px;}
.BillingTable .Col1 { }
.BillingTable .Col2 { }
</style>
</head>
<body>
<table class="LoginTable">
<tr>
<td class="Col1"> </td>
<td class="Col2"> </td>
</tr>
<tr>
<td colspan="2" class="SpanCol"><table border="1" class="BillingTable">
<tr>
<td class="Col1">First Name:</td>
<td class="Col2"><input type="text" name="FirstName" /></td>
</tr>
</table></td>
</tr>
<tr>
<td class="Col1"> </td>
<td class="Col2"> </td>
</tr>
<tr>
<td class="Col1">Login Name:</td>
<td class="Col2"><input type="text" name="LoginName"></td>
</tr>
</table>
I'm not understanding why .BillingTable .Col1 and .BillingTable .Col2 are exihibiting the same formatting as the one set for .LoginTable.
table.LoginTable td.Col1 { width: 200px; }
table.LoginTable td.Col2 { width: 400px;}
table.BillingTable td.Col1 { }
table.BillingTable td.Col2 { }
Maybe it will work for you, too. If not, best of luck!
g.
I'm not understanding why .BillingTable .Col1 and .BillingTable .Col2 are exihibiting the same formatting as the one set for .LoginTable
That's because:
.LoginTable .Col1 means:
any element with a class attribute that contains the word Col1 that is a descendant of any element with a class attribute that contains the word LoginTable
And, if .BillingTable resides somewhere inside .LoginTable ... and there is a .Col1 element anywhere inside .LoginTable (regardless of how many levels deep) the style will be applied. Like in this case, where .BillingTable is a child of .LoginTable, and .Col1 is a child of .BillingTable (thus a grandchild of .LoginTable).
What you actually want is:
.LoginTable > .Col1
...which requires .Col1 to be a child of .LoginTable for the styles to apply.
SelectORacle [penguin.theopalgroup.com]
.bar p {
color: blue;
}
.foo p {
color: red;
}
.foo .bar p {
color: green;
}
<div class="foo">
<p>red, since .foo p applies</p>
<div class="bar">
<p>green, since .foo .bar p applies</p>
</div>
</div>
<div class="bar">
<p>blue, since .bar p applies</p>
<div class="foo">
<p>red, since .foo p applies</p>
</div>
</div>
<table class="LoginTable">
<tr>
<td class="Col1"> </td>
<td class="Col2"> </td>
</tr>
<tr>
<td colspan="2" class="SpanCol">
<table border="1" class="BillingTable">
<tr>
<td class="Col1">First Name:</td>
<td class="Col2"><input type="text" name="FirstName" /></td>
</tr>
</table>
</td>
</tr>
cheers,
gary
