Fresh from
XSLT, I wanted to address sub-entities in
CSS based on a top level element so that I wouldn't have to label every sub-entity with a
class or
id attribute.
CSS selectors to the rescue! So, if I have the following
HTML structure:
<table id="ATest">
<thead>
<tr><th>Head1</th><th>Head2</th></tr>
</thead>
<tbody>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
</tbody>
</table>
Then I can select different parts of the structure ...
table#ATest { /* Entire table */ }
table#ATest thead { /* Just the thead portion */ }
table#ATest tbody { /* Just the tbody portion */ }
table#ATest tr { /* All tr sub-entities */ }
table#ATest tbody tr { /* Just the tr entities in the tbody */ }
table#ATest tbody tr:first-child { /* Just the first tr in the tbody */ }
After some testing, I found that
IE 6.0 doesn't support the use of the > selector for selecting the child (not descendent) of an entity nor does it support the :first-child pseudo class. Firefox 1.0x does support them, so I can have a different style for the first child of any entity.
