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

Question

Hi,

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

Answer 1

Your CSS is fine. Whitespace between selectors selects descendants, > would be needed for direct children.

Your problem is that the inline attribute takes precedence over the style in the stylesheet. You could try using !important, but I don't honestly know how precedence works with deprecated HTML attributes. I never use them.

Answer 2

Inline styles have higher priority than those defined in tags or a stylesheet include. Either remove the valign="top" attribute (it's deprecated in newer versions of the HTML standard anyway), or, if you cannot change the markup, mark the CSS rule as !important. The selector itself is good (you can test this by adding other rules).

Answer 3

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

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

This works.