본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 자식 요소 필터 선택자

자식 요소 필터 선택자

자식 요소들을 선택 하는 방법입니다.


자식 요소 필터 선택자(Child Filters)

자식 요소 필터 선택자
종류 설명
:first-child 첫 번째 자식 요소를 선택합니다.
:first-of-type 자식 중 첫 번째 유형의 자식 요소를 선택합니다.
:last-child 마지막 번째 자식 요소를 선택합니다.
:last-of-type 자식 중 마지막 번째 유형의 자식 요소를 선택합니다.
:nth-child() index번째에 있는 자식 요소를 선택합니다.
:nth-last-child() index번째에 있는 마지막 자식 요소를 선택합니다.
:nth-last-of-type() index번째에 있는 마지막 유형의 자식 요소를 선택합니다.
:nth-of-type() index번째에 있는 유형의 자식 요소를 선택합니다.
:only-child 자식 요소가 오직 하나인 요소를 선택합니다.
:only-of-type() 자식 요소 중 오직 하나 유형인 요소를 선택합니다.

Sample1

자식요소 필터 선택자 예제입니다.

결과

자식요소 필터 선택자

기본 선택자

계층 선택자

속성 선택자
기본 필터 선택자

내용 필터 선택자

보임 필터 선택자

자식요소 필터 선택자
폼 요소 필터 선택자
jquery
$(".list :first-child").addClass("rLine");
$(".list div:first-of-type").addClass("rLine");
$(".list :last-child").addClass("rLine");
$(".list div:last-of-type").addClass("rLine");
$(".list :only-child").addClass("rLine");
$(".list div:only-of-type").addClass("rLine");
html
<h3>자식요소 필터 선택자</h3>
<div class="list">
    <p>기본 선택자</p>
    <p>계층 선택자</p>
    <div>:first-child</div>
    <div>:first-of-type</div>
</div>
<div class="list">
    <p>last-child</p>
    <p>last-child</p>
</div>
<div class="list">
    <span>only-child</span>
</div>
<div class="list">
    <div>only-of-type</div>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    <h3>자식요소 필터 선택자</h3>
    <div class="list">
        <p>기본 선택자</p>
        <p>계층 선택자</p>
        <div>:first-child</div>
        <div>:first-of-type</div>
    </div>
    <div class="list">
        <p>last-child</p>
        <p>last-child</p>
    </div>
    <div class="list">
        <span>only-child</span>
    </div>
    <div class="list">
        <div>only-of-type</div>
    </div>

    <div class="choice">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>:first-child</em>를 보이게 합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>div:first-of-type</em>를 선택합니다.</a>
        <a href="#" class="btn3">클릭하면 <em>:last-child</em>를 선택합니다.</a>
        <a href="#" class="btn4">클릭하면 <em>div:last-child</em>를 선택합니다.</a>
        <a href="#" class="btn5">클릭하면 <em>only-child</em>를 선택합니다.</a>
        <a href="#" class="btn6">클릭하면 <em>div:only-of-type</em>를 선택합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice .off1").on("click", function(e){
            e.preventDefault();
            $(".list p, .list div, .list span").removeClass("rLine");
        });
        $(".choice .btn1").on("click", function(e){
            e.preventDefault();
            $(".list :first-child").addClass("rLine");
        });
        $(".choice .btn2").on("click", function(e){
            e.preventDefault();
            $(".list div:first-of-type").addClass("rLine");
        });
        $(".choice .btn3").on("click", function(e){
            e.preventDefault();
            $(".list :last-child").addClass("rLine");
        });
        $(".choice .btn4").on("click", function(e){
            e.preventDefault();
            $(".list div:last-of-type").addClass("rLine");
        });
        $(".choice .btn5").on("click", function(e){
            e.preventDefault();
            $(".list :only-child").addClass("rLine");
        });
        $(".choice .btn6").on("click", function(e){
            e.preventDefault();
            $(".list div:only-of-type").addClass("rLine");
        });
    </script>
</body>
</html>

Sample2

자식요소 필터 선택자 예제입니다.

jquery
$(".list2 :nth-child(3)").addClass("rLine");
$(".list2 :nth-child(3n+1)").addClass("rLine");
$(".list2 :nth-last-child(1)").addClass("rLine");
$(".list2 :nth-last-child(3)").addClass("rLine");
$(".list2 div:nth-last-of-type(1)").addClass("rLine");
$(".list2 div:nth-of-type(1)").addClass("rLine");
html
<div class="list2">
    <p>기본 선택자</p>
    <p>계층 선택자</p>
    <p>속성 선택자</p>
    <p>기본 필터 선택자</p>
    <div>내용 필터 선택자</div>
    <div>보임 필터 선택자</div>
    <div>자식요소 필터 선택자</div>
    <div>폼 필터 선택자</div>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        li.select:before {content:'Select'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        .choice a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    <h3>자식요소 필터 선택자</h3>
    <div class="list2">
        <p>기본 선택자</p>
        <p>계층 선택자</p>
        <p>속성 선택자</p>
        <p>기본 필터 선택자</p>
        <div>내용 필터 선택자</div>
        <div>보임 필터 선택자</div>
        <div>자식요소 필터 선택자</div>
        <div>폼 필터 선택자</div>
    </div>

    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 <em>:nth-child(3)</em>를 보이게 합니다.</a>
        <a href="#" class="btn2">클릭하면 <em>:nth-child(3n+1)</em>를 보이게 합니다.</a>
        <a href="#" class="btn3">클릭하면 <em>:nth-last-child(1)</em>를 보이게 합니다.</a>
        <a href="#" class="btn4">클릭하면 <em>:nth-last-child(3)</em>를 보이게 합니다.</a>
        <a href="#" class="btn5">클릭하면 <em>div:nth-last-of-type(1)</em>를 보이게 합니다.</a>
        <a href="#" class="btn6">클릭하면 <em>div:nth-of-type(1)</em>를 보이게 합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 p, .list2 div").removeClass("rLine");
        });
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 :nth-child(3)").addClass("rLine");
        });
        $(".choice2 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list2 :nth-child(3n+1)").addClass("rLine");
        });
        $(".choice2 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list2 :nth-last-child(1)").addClass("rLine");
        });
        $(".choice2 .btn3").on("click", function(e){
            e.preventDefault();
            $(".list2 :nth-last-child(3)").addClass("rLine");
        });
        $(".choice2 .btn4").on("click", function(e){
            e.preventDefault();
            $(".list2 div:nth-last-of-type(1)").addClass("rLine");
        });
        $(".choice2 .btn5").on("click", function(e){
            e.preventDefault();
            $(".list2 div:nth-of-type(1)").addClass("rLine");
        });
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기