css - How to make a parent --> node relationship in css?

Question

Can someone help me to fix this parent -> node relationship in css.
To make it clear, let's see some example:

Css: Parent and child relationship

Rules:

1. All first Parent should be colored in Blue
2. All sub parent should be colored in Orange
3. All child should be colored in Green

It is considered as a parent if it has 1 or more sub node/child.
It is considered as a child if it has no sub node/child.

It means:

Parent1-child2-Subparent1-child1  

and

Parent1-child2-Subparent1-child2  

should be colored in green.
No script is allowed. Only css, and as much as possible, should be cross browser compatible. Please help, I can't figure out the logic of it.

Answer 1

@Chowlett

As I always believe, code is not the law, but the logic.
Here is the Solution

I just added:

a + .jqtree-title  

here:

#tree1 .jqtree-tree > .jqtree-folder .jqtree-folder div  a + .jqtree-title
{
    color:orange;
}  

And everything works fine even on a deep tree hierarchy.

Answer 2

There's no selector for this in the current CSS Selectors Level 3 module. However, the Selectors Level 4 module offers a method to determine "the subject of a selector".

That being said, there's no browser that implements that behaviour, as CSS4:Selectors are still a working draft. You'll have to use JavaScript.