开发者

in css3, can you set an element's style according to what it contains?

for example, if I wished to center the contents of a TD if it contained, or had firstChild of, INPUT[type='checkbox']

<style>
td ?? { text-align: center; }
</style>

do not see how it can be done. believe impossible. have been wrong before.


if align were still legal, one might have

td > input[type='checkbox'] { align: center开发者_StackOverflow; }

but don't think that's possible


That's called either ancestor or parent selector and won't be implemented because selectors are unable to ascend.
As an alternative you will be able to achieve it using $ which is currently not supported by the latest browsers.


Well, styling the parent by checking the properties of a child is not possible through CSS (I guess).

Example

HTML

<div id="parent">
    This is the parent.
    <div id="child">
        This is the child.
    </div>
</div>

CSS

You can do this -

#parent > #child {
    color: red;
}

But this will give red color to This is the child. and not This is the parent.


I was looking for the same thing some time ago, and I found it is not possible to define that kind of "backreferences" in CSS. It is not possible to define a CSS rule that takes into account inner childs to define the parent styles.

In your case, if you know in advance which cells are going to contain a checkbox, you should create a class:

td.centered {
  ...
}

and use that style in your markup:

<td class="centered">
    your checkbox here
</td>

Or you can do it with javascript after the table is rendered:

$("input[type='checkbox']").parent("td").css(...);

To know some of the reasons, you can also take a look at Why don't have a parent selector.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜