how to use css to style a descendant (not a direct child) of an element?

Tags: css,table,hbox

Problem :

I am trying to override the style of a descendant(not the direct child) of an element using css.

Say, I am working on:

<table id="z_d__h3-real" class="z-hbox">
 <tbody>
   <tr valign="top">
   -----
   </tr>
  </tbody>
</table>

I want to override the style to set the valign of the tr element to "center".

I tried doing:

table.z-hbox tr {
    vertical-align:center;
}

This doesn't work though. I assume table.z-hbox tr is looking up for a direct child <tr> which is not the case here. As <tr> is wrapped inside <tbody>

How do I fix this?

Thanks, Sony

---

Solution :

The problem is not with the precedence. I figured out that it should be

vertical-align: middle instead of vertical-align: center

This works.