Steve Pugh wrote:
Impossible to say as you haven't told us what the styles were, nor
what the relevant HTML is, nor whether you were using Standards or
Quirks mode, nor which browsers you tested in, nor in what way the
first one didn't work.
Firefox, quirks mode. Does that make a difference for this particular
behavior? (I know, everything makes a difference.)
Here's the test HTML that I initially wrote:
<html>
<head>
<style>
.type1 { color: red }
.type2 { color: green }
.type1 .type2 { color: blue }
</style>
</head>
<body>
<p class="type1">
Type 1 should be red.
</p>
<p class="type2">
Type 2 should be green.
</p>
<p class="type1">
More of type 1.
<blockquote class="type2">
Type 2 inside type 1 should be blue, but it isn't.
</blockquote>
</p>
</body>
</html>
What's weird is that if I rewrite it like this it (nesting classes)
works fine. It's weird because I can't see the real difference:
<html>
<head>
<style>
table, tr, td { border: solid 1px black; border-collapse:
collapse }
.row1 { color: red }
.row2 { color: green }
.col1 { background: white } /* this line isn't really needed */
.row1 .col1 { background: grey }
</style>
</head>
<body>
<table>
<caption>This mysteriously works right</caption>
<tr><td>Text</td><td class="col1">Special</td>
<td>Unstyled row with special column.</td></tr>
<tr class="row1"><td>Text</td><td>Not Special</td>
<td>Styled row without special column.</td></tr>
<tr class="row2"><td>Text</td><td class="col1">Special</td>
<td>Wrong styled row with special column.</td></tr>
<tr class="row1"><td>Text</td><td class="col1">Special</td>
<td>Styled row with special column.</td></tr>
</table>
</body>
</html>
