Software: CSS Selectors

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.