Question: I want to select the first level `.box` of each one of these three `.box` siblings, but not their children `.box`(s). (Does this make sense?) 

Here's my markup:

```
<div class="box">
    <div class="box">
        test
    </div>
</div>

<div class="box">
    <div class="box">
        test2
    </div>
</div>

<div class="box">
    <div class="box">
        test3
    </div>
</div>

```

How can I perform this selection with CSS?

Answer: 
This is not possible unless you specifically refer to the parent of the outer boxes somehow. For example, if you know that all of this is going to be inside `#foo`, then `#foo > .box` will do the job.

However, you *can* select boxes which are in another box with `.box > .box` or `.box .box`, so in this manner it might be possible to do what you need using the classic workaround of "undoing changes". For example, to turn only the outer boxes blue:

```
.box { background: blue } /* make a far-reaching change */
.box .box { background: transparent } /* then undo it partially */

```

Of course the inner boxes will still show the blue background of their parents, but you get the idea.
The better way to select just the first ones is to use the `>` in your css selector so use it like this:

```
body>.box {
    css here
}

```