Search code examples
csshtml-tablehbox

How to use CSS to style a descendant (not a direct child) of an element?

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?

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.