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

Question

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; }

but don't think that's possible

Related to http://stackoverflow.com/questions/4628905/how-can-i-set-a-parent-elements-style-based-on-its-childs-attributes-in-css — Guido, Aug 14 '11 at 11:32

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

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.

edited May 23 '17 at 12:04

Community

1
1

answered Aug 14 '11 at 11:38

Knu

14,806
5
56
89

had not seen the `$` - exactly what we need! any idea if/when it's coming? – cc young Aug 14 '11 at 11:43
@young at the current rate I would say 2 years. In my dreams: yesterday. – Knu Aug 14 '11 at 11:51

Guido · Answer 2 · 2011-08-14T11:49:32.507

0

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.

edited Aug 14 '11 at 11:49

answered Aug 14 '11 at 11:25

Guido

46,642
28
120
174

you're right, but do a lot of dynamic forms, so something like this would make my life easier – cc young Aug 14 '11 at 11:44
1

With javascript you could, once your layout is rendered, find every checkbox -> find its parent -> apply the style. I think jQuery has some methods that could help you : $("input[type='checkbox'").parent("td").css(...); – Guido Aug 14 '11 at 11:48
using jsrp - about a week from 0.1 release - `r.td('.c',r.checkbox('active'))` where `r` is a renderer and 'active' is a column name and 'c' is class name (that centers) - I think I'm the only person in the universe who doesn't use jQuery – cc young Aug 14 '11 at 13:08

score 0 · Answer 3 · answered Aug 14 '11 at 11:37

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.

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

3 Answers3

Example

HTML

CSS