자식 요소 필터 선택자
자식 요소들을 선택 하는 방법입니다.
자식 요소 필터 선택자(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>