Selector is looking at children then grandchildren, instead of just grandchildren?

Problem

I have the following selectors, which are meant to give the first row in a table the proper border-radius properties:

table.alt tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 }
table.alt tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 }
table.alt tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

The idea was to allow whatever first row appeared, whether it was in a table head or table body, to be properly stylized with the border-radius it needs on the top left and right corners. I was hoping by excluding the thead/tbody/tfoot part, that it would just look for the first table row found in the table, but that doesn't seem to be the case. It keeps wanting to match the first table row in each of thead/tbody/tfoot separately. So it appears to be running the selectors more like this:

table.alt > * > tr:first-of-type > *:first-of-type { border-radius: 5px 0 0 0 }
table.alt > * > tr:first-of-type > *:last-of-type { border-radius: 0 5px 0 0 }
table.alt > * > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

This could easily be fixed for the table footer by using *:not(tfoot), but there's still the problem of differentiating between the thead and tbody elements. While most of my tables will have a table header, not all of them will.

Is there any way to get around this dilemma, or maybe a better alternative for applying border-radius to all the corners of the table?
Note: I do apply a background color to every table cell, so it overlaps the outer table's border-radius. I also use * in the last section so that it can match either a th or td.

Problem courtesy of: animuson

Solution

Duh, simple way to fix it. Just make the second section look at the first child of the table, then look at the first row in that section... This would also work well for doing the bottom corners, instead looking for the last child and last row in that section.

table.alt > *:first-child > tr:first-of-type > *:first-child { border-radius: 5px 0 0 0 }
table.alt > *:first-child > tr:first-of-type > *:last-child { border-radius: 0 5px 0 0 }
table.alt > *:first-child > tr:first-of-type > *:only-child { border-radius: 5px 5px 0 0 }

I can't believe it took me that long to figure it out. Looks kind of sloppy but it gets the job done.

Solution courtesy of: animuson

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.