'Selector'에 해당되는 글 12건

  1. 2011.01.06 :first-child Selector

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
이전버튼 1 2 3 4 5 6 7 ··· 12 이전버튼

블로그 이미지
IT

공지사항

Yesterday
Today
Total

달력

 « |  » 2025.7
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 31

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함