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.


    CSS Howto..

    How to make this text bigger?

    How to make css jquery autofit navigation?

    How can I make a two column layout's main div auto fit to browser width?

    How to fix error css width x height when run as mobile

    CSS - How to make the A Link work inside a DIV with background image

    How to move box-shadow?

    How to override background image defined in CSS with another CSS?

    How do I center “my” navigation bar?

    How to adapt a flex div's width to content

    How to add numbered list style in div tag

    How to avoid CSS styles to be applied for particular element

    how to combine css with php while loop and table?

    How come my divs are jumping around during a transition?

    HTML & CSS: How to style an HR tag to have a title embedded in it

    How to Change background-color of .body when hover menu ( Jquery - Shopify )?

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    How do I change the last textual node child in JavaScript

    how to make smooth css transition

    Bootstrap progress bar with gradient color showing proportionally on active width

    How do I do rounded corners in CSS in Google Chrome

    How can I set -webkit-mask-box-image through javascript?

    How to have 2+ boxes slide down

    How to generate a PDF from an HTML / CSS (including images) source in Python? [closed]

    How do I set frame alignment?

    how can i add a separator gif between two content areas something like this?

    how to apply background transparency on a div (for an AJAX loading animation)?

    How to change the color of first row of first table using css

    How to keep an image and text (vmax font) aligned when resizing browser?

    Jquery Dropdownlist not shows the selected item.?

    CSS: How to align vertically a “label” and “input” inside a “div”?