Question

<script>
    $(document).ready(function (){
        $("#container div:first-child").text("foobar");        
    });    
</script>
<div id="container">
    <div>foo</div>
    <div>bar</div>
</div>

Will print

foobar
bar

What’s the proper syntax for the selector to select only the first child node regardless of the element it is?

For example how can I change the selector so that

<span>foo</span>
<div>bar</div>

Would print

foobar
bar

Answer 1

Just remove the div part of the selector…

$("#container :first-child").text("foobar");

or you could substitute *, but there’s no difference…

$("#container *:first-child").text("foobar");