CSS first GENERATION div but not second selector

Question

I want to match the first generation division elements (all of them) but NOT any of THEIR children. So if I used the selector to apply a border 1 (as below visually) would gain the container however 2 (as below visually) would NOT gain the container. How do I construct that selector please?

<div id="container">
<div>1<div>2</div></div>
<div>1<div>2</div></div>
<div>1<div>2</div></div>
</div>

Answer 1

#container > div {
   border: 1px solid #f0f;
}

Answer 2

The best way is using the immediate child selector (>):

#container > div {
  border: 1px solid red;
}

(IE6 does not support this)

Answer 3

The selector for that is:

div#container > div

or just

#container > div

I really like the SelectORacle to help understand CSS selectors. More on Child Selectors from Eric Meyer.

UPDATE FOR Microsoft Internet Explorer 6

If support for > is a concern, as in the case of MSIE6, the traditional way I used to handle it was to set the styles for the first generation, then unset them for every other descendent generation. So, like this:

#container div { border: 1px solid #000; }
#container div div { border: none; }
#container div div div { border: none; }
#container div div div div { border: none; }

You do that with as many generations down as you need to do. In the above I allow 3 more levels of nesting (enough?) It is not pretty, but it is reliable.