SeouliteLab

jQuery의 :last-child 선택자 활용하기 본문

프로그래밍

jQuery의 :last-child 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:11

jQuery의 :last-child 선택자는 부모 요소의 마지막 자식 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하여 웹 페이지에서 마지막 자식 요소를 선택하고 스타일을 변경하거나 이벤트를 추가할 수 있습니다.

예제 1: 마지막 자식 요소에 스타일 적용하기

<!DOCTYPE html>
<html>
<head>
  <title>마지막 자식 요소에 스타일 적용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("ul li:last-child").css("font-weight", "bold");
    });
  </script>
  <style>
    ul {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>마지막 항목</li>
  </ul>
</body>
</html>

설명: 위 예제는 ul 요소의 마지막 자식 li 요소에 글꼴을 굵게 만듭니다.

예제 2: 마지막 자식 요소에 이벤트 추가하기

<!DOCTYPE html>
<html>
<head>
  <title>마지막 자식 요소에 이벤트 추가하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("ul li:last-child").click(function(){
        alert("마지막 항목을 클릭했습니다!");
      });
    });
  </script>
</head>
<body>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>마지막 항목</li>
  </ul>
</body>
</html>

설명: 이 예제는 ul 요소의 마지막 자식 li 요소를 클릭하면 알림창이 뜨는 이벤트를 추가합니다.

예제 3: 특정 클래스를 가진 요소의 마지막 자식 선택하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 클래스를 가진 요소의 마지막 자식 선택하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(".box:last-child").css("background-color", "lightblue");
    });
  </script>
  <style>
    .box {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="box">박스 1</div>
  <div class="box">박스 2</div>
  <div class="box">마지막 박스</div>
</body>
</html>

설명: 이 예제는 box 클래스를 가진 요소 중 마지막 자식을 선택하여 배경색을 변경합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 :last 선택자 활용하기  (0) 2024.04.12
jQuery의 :last-of-type 선택자 활용하기  (0) 2024.04.12
jQuery의 :lang() 선택자 활용하기  (0) 2024.04.12
jQuery의 :input 선택자 활용하기  (0) 2024.04.12
jQuery의 :image 선택자 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more