Using CSS selectors to hide element having a specific child

Lukrez · Post by **Lukrez** » Sat Dec 02, 2006 11:57 am

Hello,

I know that with the CSS child selector, I can select an element that is child of a specific element. Is there a possibility with CSS to select an element, that is parent of a specific element?

Lukrez.

Wladimir Palant · Post by **Wladimir Palant** » Mon Dec 04, 2006 1:20 am

No, CSS always works top-down.

sheepy · Post by **sheepy** » Mon Dec 04, 2006 8:36 am

AFAIK The CSS team didn't do it because of implmentation performance. In the age of AJAX, DOM tree can change any time. Now when a node change, you only need to check the node & its child for style change. If CSS supports, say, a :subject selector, style change will need to be detected both down the tree and up the tree.

Personally, I really really want to be able to do something like this, it gives us power, and I'm optimistic it won't be abused worse then CSS hacks or Javascript popup.

But W3C says no.

Wladimir Palant · Post by **Wladimir Palant** » Mon Dec 04, 2006 9:29 am

This is something that can't be implemented efficiently. To check the parent of an element you simply have to go up in the DOM tree. However, to check whether the element "contains something like" you really have to check every child and then probably recursively. There is a good reason this never will be part of CSS.

Lukrez · Post by **Lukrez** » Mon Dec 04, 2006 10:12 am

Wladimir Palant wrote:... To check the parent of an element you simply have to go up in the DOM tree. However, to check whether the element "contains something like" you really have to check every child and then probably recursively. ...

I don't see how that should kill performance in comparison to the child selector. For example, if I have "a > b > c", I would select element "c". With a hypothetical operator » for "having child", it would now read "a » b » c". I think in this case you can equally start from bottom to top in the DOM tree, testing whether node "c" has parent "b" and whether node "b" has parent "a". All the CSS implementation has to do is to apply the style statements to node "a" instead of "c" in the former case.

Wladimir Palant · Post by **Wladimir Palant** » Mon Dec 04, 2006 10:56 am

Lukrez, that isn't how CSS works. The browser doesn't evaluate CSS when it has a document that finished loading, it is rather evaluated for every node inserted into the document while it is loading. And then, if you have a child selector "a > b > c" you can easily test - does the node match "c"? Does its parent (it has only one) match "b"? And so on, it is pretty straightforward. Making it possible for parents to depend on their children introduces very complex dependencies on the other hand.