Can't target first-child

Question

I'm trying to target the first child of this code, however it doesn't seem to work, I've tried with all the different methods I could find but none seems to work. Any idea on how I could fix it ?

<div id="main">
<div class="page">
    <p>random 1</p>
</div>    
<div class="page">
    <p>random 2</p>
</div> 
<div class="page">
    <p>random 3</p>
</div> 
<div class="page">
    <p>random 4</p>
</div> 

$('div#main').children('div.page:first-child').addClass('current');

.page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.current{
visibility: visible;
z-index: 1;
}

Answer 1

You shouldn't have to use children() here. [EXAMPLE}(http://jsfiddle.net/U7LmH/1/)

$('div#main .page:first-child').addClass('current');

Answer 2

Try this:

$('div#main').children('div.page:first')

or also try this:

$('div#main').children('div.page:eq(0)')

Answer 3

Just

$('div#main div.page:first-child').addClasS("current")

should work fine

Answer 4

Your code should works: Fiddle

Make sure you've included jQuery properly and put your jQuery code after including jQuery.

Lastly, try to wrap your code inside DOM ready handler:

$(function() {
    $('div#main').children('div.page:first-child').addClass('current');
});