2011. 1. 6. 16:05 jQuery

:first-child Selector

element 들 중의 첫번째에 해당하는 element를 선택한다.

<!DOCTYPE html>
<html>
<head>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>

  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>

  </div>
<script>
    $("div span:first-child")
        .css("text-decoration", "underline")
        .hover(function () {
              $(this).addClass("sogreen");
            }, function () {
              $(this).removeClass("sogreen");
            });

</script>

</body>
</html>
위 예제에서 div 아래에 있는 span element들 중에 첫번째에 해당하는 element에 대해서 underline 효과를
주고 마우스 오버했을 경우 sogree css class를 부여하고 마우스 아웃할 경우 sogreen css class를 제거한다.


'jQuery' 카테고리의 다른 글

ID Selector (“#id”) 와 Class Selector (“.class”)  (0) 2011.01.06
Child Selector (“parent > child”)  (0) 2011.01.06
:eq() Selector  (0) 2011.01.06
:last Selector  (0) 2010.12.30
Attribute Starts With Selector [name^="value"]  (0) 2010.12.30
Posted by IT

블로그 이미지
IT

공지사항

Yesterday
Today
Total

달력

 « |  » 2025.4
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함