want to know the working of code

want to know the working of code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 
  <script>
  $(document).ready(function(){
   
    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });

  });
  </script>
  <style>
  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
        height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
  </style>
</head>
<body>
  <span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>



this code i taken right from jquery official site



i have problem with this part
$("div:hidden:first")

when it is there it make all the divs to fade one by one


when i change it to this
$(div)
all fade in at one time
and when i write this$(div:first)
so only first div fade in.
now what special thing is done by $(div:hidden:first) which make them to fade one at a time.....how it is working.....