How to select the first child without knowing its element?
<pre><code>&lt;script&gt;
    $(document).ready(function (){
        $("#container div:first-child").text("foobar");        
    });    
&lt;/script&gt;
&lt;div id="container"&gt;
    &lt;div&gt;foo&lt;/div&gt;
    &lt;div&gt;bar&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Will print</p>

<pre><code>foobar
bar
</code></pre>

<p>What's the proper syntax for the selector to select only the first child node regardless of the element it is?</p>

<p>For example how can I change the selector so that</p>

<pre><code>&lt;span&gt;foo&lt;/span&gt;
&lt;div&gt;bar&lt;/div&gt;
</code></pre>

<p>Would print</p>

<pre><code>foobar
bar
</code></pre>
