jQuery ( ": first-child") > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

jQuery ( ": first-child") 정보

jQuery jQuery ( ": first-child")

본문

jQuery ( ": first-child")


설명 : 부모의 첫 번째 하위 요소 인 모든 요소를 ​​선택합니다.


반면 : 첫 번째 요소는 하나만 일치 하지만 :first-childselector는 둘 이상 (하나의 부모에 대해 하나)과 일치 할 수 있습니다. 이것은에 해당합니다 :nth-child(1).


예:

일치하는 div의 첫 번째 범위를 찾아서 밑줄을 긋고 호버 상태를 추가합니다.


<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>first-child demo</title>

  <style>

  span {

    color: #008;

  }

  span.sogreen {

    color: green;

    font-weight: bolder;

  }

  </style>

  <script src="https://code.jquery.com/jquery-1.10.2.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>

추천
0

댓글 1개

전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT