:first-child

http://api.jquery.com/first-child-selector/

$(':first-child') 1.1.4追加
デモ

$(':first-child') 1.1.4追加

最初の子要素を選択します。
:firstが全体で1つだけの要素にしかマッチしないのに対し、:first-childは各要素内のそれぞれの1つ目の要素にマッチします。これは、:nth-child(1)と等価です。

デモ

各DIV内の1つ目のSPAN要素に対し、下線のスタイルとhoverイベントをセットしています。

<!DOCTYPE html>
<html>
<head>
<style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
  <span>晴れ、</span>
  <span>曇り、</span>
  <span>雨</span>
</div>
<div>
  <span>徒歩、</span>
  <span>電車、</span>
  <span>車</span>
</div>
<script>
  $("div span:first-child")
    .css("text-decoration", "underline")
    .hover(function () {
        $(this).addClass("sogreen");
      }, function () {
        $(this).removeClass("sogreen");
      });
</script>
</body>
</html>