Select top level children using CSS

Question

Is it possible to select all top level children regardless of their type using CSS.

<div class="parent"> <div class="top-level-1">
 <!-- CONTENT -->
</div>
<div class="top-level-2">
 <!-- CONTENT -->
</div>
<a class="top-level-3">
 <!-- CONTENT -->
</a> </div>

When I use,

.parent * {}

it selects the child elements but also elements within that child.

What I want to do is,

1. Select ONLY the top level child elements (in the sample code above - div.top-level-1, div.top-level-2 and a.top-level-3)

2. Classes will not be the same therefore a solution where classes are not used is preferred.

Here is the JSFiddle for better understanding: http://jsfiddle.net/Q4BBd/

Answer 1

Use the > combinator to select only immediate children (of any type) of a top-level <div>:

body > div > * {}

JSFiddle