I am having sidebar boxes and I want to change content of single box on the click event.

Here is my code : 

```
<div class="sidebar">
    <div class="box">    //box 1 
        <div class="box-t">      
            <div class="box-b">
                <div class="">
                    <h2>This is sample box 1</h2>
                    <p style="text-align: left;">Please give us a shout at 
                        <a href="mailto:concierge@example.com">concierge@example.com</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="box">    //box 2 
        <div class="box-t">      
            <div class="box-b">
                <div class="">
                    <h2>This is sample box 2</h2>
                    <p style="text-align: left;">Please give us a shout at 
                        <a href="mailto:concierge@example.com">concierge@example.com</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div> //sidebar div close

```

Above code is get generated dynamically and I want change the content of first box on a click of one button.

So to access first child div from sidebar, I have made a use of :

```
$('div.sidebar > : first-child').html('<div>hiiiiiiii</div>');

```

and also I have tried :

```
$('div.sidebar > : first-child').replaceWith('hiiiiiiii');

```

But both above attempts are not changing any data.

What is missing or is there any other way to change the content from of single div from multiple divs whose having same class ?
['https://Stackoverflow.com/questions/23240392', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1242378/']
you need to use `:first`. it will select only the first child of div with class sidebar:

```
$("div.sidebar :first").html('<div>hiiiiiiii</div>');

```

[**Here is DEMO**](http://jsfiddle.net/G6y5z/1/)
```
$('div.sidebar : first-child').html('<div>hi with just 1 i </div>');

```