How to use CSS to style a descendant (not a direct child) of an element?
-
05-10-2019 - |
سؤال
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?
المحلول 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.
نصائح أخرى
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).
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.