How to get all child elements excluding grandchildren

Question

See here: http://jsfiddle.net/QVhAZ/4/

How can I use * but only have it apply to direct children? In the example, I'd want it to only apply to the "Child" divs, not the "Grandchild (should not be red)" divs.

I don't want to apply a class to each "child" div, what I want is to say:

div#Root *:depth(1)
{
    color: red;
}

Answer 1

You mean this?

div {margin:20px;}

div#Root > div {color:red;}

div#Root > div > div {color:black;}

http://jsfiddle.net/QVhAZ/20/

Also using * selector selects not only divs but all elements - and it is also much slower since it has to parse all. Note that color will still be inherited by all children so you have to specify the color you want to use for all the rest.