안녕하세요.
빅한 입니다.
아.. 임시저장한것이 날라갔네요...
가슴이 아프네요...
그래도 있는 힘것 다시 정리하도록 하겠습니다.
이번에는 자식 필터 선택자에 대하여 살펴보겠습니다.
말에서 표현되는 것처럼 현재 선택자에 대한 부모의 자식에 대한 필터라고 생각하시면 이해하기 쉬울것 같습니다.
주로 표현한 선택자의 기점으로 바로위 부모의 자식 또는 형제 요소중에 고르는 것을 말합니다.
앞으로 설명할 종류에서 볼수 있듯이 크게 'child'와 'of-type'의 명칭이 들어간 것을 볼수 있는데요.
'child'는 선택자에 대한 부모를 기점으로 자식요소들 중 특정 요소를 찾는 것이고
'of-type'은 선택자의 기점으로 형제노드를 찾는 것이라 이해하시면 보다 쉽게 이해 될것입니다.
그럼 종류부터 시작해 보겠습니다.
종류
종류는 다음과 같이 정리할 수 있습니다.
- :first-child
선택자 요소의 부모의 첫번째 자식요소가 선택자와 동일한 요소를 모두 선택. - :first-of-type
선택자의 형제 요소 중에 동일한 선택자들 중 가장 첫번째 요소를 모두 선택 - :last-child
선택자 요소의 부모의 가장 마지막 자식요소가 선택자와 동일한 요소를 모두 선택 - :last-of-type
선택자의 형제 요소 중에 동일한 선택자들 중 가장 마지막 요소를 모두 선택 - :nth-child(n)
선택자 부모의 n번째 자식요소가 선택자와 동일한 요소를 모두 선택 - :nth-last-child(n)
선택자 부모의 뒤에서 n번째 자식요소가 선택자와 동일한 요소를 모두 선택 - :nth-last-type-of(n)
선택자의 형제 요소 중에 동일한 선택자들 중 뒤에서 n번째 요소를 모두 선택 - :nth-of-type(n)
선택자의 형제요소 중에 동일한 선택자들 중 n번째 요소를 모두 선택 - :only-child
선택자의 부모의 자식요소가 단 한개의 요소이며 선택자와 동일한 모든 요소 선택 - :only-of-type
선택자의 형제요소중에 동일한 요소가 단 한개만 있는 모든 요소 선택
다시 한번 언급하지만 'child'와 'of-type'을 주의 깊게 살피면서 정리한 내용을 살펴보는 것이 중요합니다!
전체예제 소스
다음은 앞으로 설명한 전체 소스입니다.
이해가 되지 않을 때 조금씩 변형하면서 해보시면 분명 도움이 될것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../lib/jquery.js"></script>
<style>
table div{
margin: 20px;
}
table span{
display: block;
}
table button{
margin: 5px;
padding: 10px;
}
.bg-red {
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<span>Div00-Row0-Span00</span>
<span>Div00-Row1-Span01</span>
<span>Div00-Row2-Span02</span>
<span>Div00-Row3-Span03</span>
</div>
<div>
<span>Div01-Row0-Span00</span>
<span>Div01-Row1-Span01</span>
<span>Div01-Row2-Span02</span>
<span>Div01-Row3-Span03</span>
</div>
<div>
<b>Div02-Row0-B00</b>
<span>Div02-Row1-Span00</span>
<span>Div02-Row2-Span01</span>
<span>Div02-Row3-Span02</span>
</div>
<div>
<span>Div03-Row0-Span00</span>
<span>Div03-Row1-Span01</span>
<span>Div03-Row2-Span02</span>
<b>Div03-Row3-B00</b>
</div>
<div>
<span>Div04-Row0-Sapn00</span>
</div>
<div>
<b>Div05-Row0-B00</b>
<span>Div05-Row1-Sapn00</span>
<b>Div05-Row2-B01</b>
</div>
</td>
<td>
<button id="example0">0(:first-child)</button><br>
<button id="example1">1(:first-of-type)</button><br>
<button id="example2">2(:last-child)</button><br>
<button id="example3">3(:last-of-type)</button><br>
<button id="example4">4(:nth-child(2))</button><br>
<button id="example5">5(:nth-last-child(2))</button><br>
<button id="example6">6(:nth-last-of-type(2))</button><br>
<button id="example7">7(:nth-of-type(2))</button><br>
<button id="example8">8(:only-child)</button><br>
<button id="example9">9(:only-of-type)</button><br>
</td>
</tr>
</table>
<script>
$(function () {
$('#example0').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:first-child').addClass('bg-red');
})
$('#example1').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:first-of-type').addClass('bg-red');
})
$('#example2').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:last-child').addClass('bg-red');
})
$('#example3').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:last-of-type').addClass('bg-red');
})
$('#example4').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:nth-child(2)').addClass('bg-red');
})
$('#example5').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:nth-last-child(2)').addClass('bg-red');
})
$('#example6').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:nth-last-of-type(2)').addClass('bg-red');
})
$('#example7').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:nth-of-type(2)').addClass('bg-red');
})
$('#example8').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:only-child').addClass('bg-red');
})
$('#example9').click(function (e) {
$('table *').removeClass('bg-red');
$('div span:only-of-type').addClass('bg-red');
})
})
</script>
</body>
</html>종류별 정리
위에서 게속 강조 했듯이 크게 부모기점으로 자식요소 필터하는 'child', 자신기점으로 형제요소를 필터하는 'of-type'를 구분하고 이 두가지 종류에서 가장 첫번째요소, 가장 마지막 요소, n번째 요소, 마지막으로 부터 n번째 요소, 단 한개의 요소에 대하여 정리하도록 하겠습니다.
정리도중 표현하는 대부분의 예제는 구분을 하기위해 class를 활용하여 '.bg-red'라는 class를 주게 되면 배경색을 적색(빨강색)으로 변경 하도록 하였습니다.
css의 내용은 다음과 같습니다.
.bg-red {
background: red;
}:first-child
이 필터는 선택자 요소의 부모의 첫번째 자식요소가 선택자와 동일한 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:first-child').addClass('bg-red');모든 div 요소안에 span의 부모요소의 첫번째 자식요소중 span인 요소를 선택하여 적색의 배경을 만들어 질 것입니다.
예제의 button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과에서도 알수 있듯이 div요소안에 있는 span요소의 부모요소에서 첫번째 요소가 span인 요소를 선택한 것을 알수 있습니다.
div02와 div05같은 경우는 첫번째 요소가 span이 아니므로 선택되지 않은 것을 볼수 있습니다.
:first-of-type
이 필터는 선택자의 형제 요소 중에 동일한 선택자들 중 가장 첫번째 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:first-of-type').addClass('bg-red');모든 div요소 안에 span요소의 형제 요소중 가장 첫번째 span요소를 선택하게 됩니다.
결과를 확인하기 위해 button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과를 보면 꼭 첫번째 요소가 선택되는 것이 아닌 해당 선택한 요소의 형제요소들 중에 자신과 같은 첫번째 요소를 모두 선택된 것을 알수 있습니다.
div02, div05같은 경우를 보면 두번째 요소가 선택되었지만 span요소중에서는 가장 첫번째이므로 선택된 것입니다.
:last-child
이 필터는 선택자 요소의 부모의 가장 마지막 자식요소가 선택자와 동일한 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:last-child').addClass('bg-red');이 필터는 :first-child와 반대되는 필터 입니다.
선택된 span의 부모요소의 가장 마지막 요소가 선택한 span과 동일한 요소일 경우 선택합니다.
결과는 button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과에서 볼수 있을듯 선택된 요소(span)의 부모 요소 중 가장 마지막 요소가 선택된 요소(span)과 동일한 요소를 선택되어진 것을 볼수 있습니다.
div03, div05의 경우 span이 선택되었지만 가장 마지막 요소가 span이 아니라서 선택되지 않은 것을 볼수 있네요.
:last-of-type
이 필터는 선택자의 형제 요소 중에 동일한 선택자들 중 가장 마지막 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:last-of-type').addClass('bg-red');이 필터는 :first-of-type과는 반대되는 필터입니다.
선택된 요소(span)의 형제 요소들 중 선택된 요소(span)와 동일한 마지막 요소를 선택할 것입니다.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과에서 알수 있듯이 선택된 요소(span)의 형제 요소들 중 선택한 요소(span)와 동일한 요소들중 가장 마지막 요소를 선택한 것을 볼 수 있습니다.
div03, div05를 보면 마지막에서 두번째요소가 선택되어졌지만 해당 형제요소이며 span인 요소 중 가장 마지막인 요소인 것을 확인할수 있습니다.
:nth-child(n)
이 필터는 선택자 부모의 n번째 자식요소가 선택자와 동일한 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:nth-child(2)').addClass('bg-red');이 필터는 선택된 요소(span)의 부모요소에서 2번째 자식 요소가 선택한 요소(span)일 경우 선택될 것입니다.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과를 보시면 선택된 요소(span)의 부모 요소의 2번째 자식요소가 선택한 요소(span)와 동일한 것만 선택된 것을 알수 있습니다.
:nth-last-child(n)
이 필터는 선택자 부모의 뒤에서 n번째 자식요소가 선택자와 동일한 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:nth-last-child(2)').addClass('bg-red');이 필터는 :nth-child와 반대로 선택된 요소(span)의 부모 요소에서 마지막에서 2번째 요소가 선택된 요소(span)와 동일할 경우 선택될 것입니다.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과에서 알 수 있듯이 뒤에서 선택된 요소(span)의 부모 요소의 뒤에서 2번째 요소가 선택된 요소(span)과 동일할 경우 선택된 것을 볼수 있습니다.
:nth-last-of-type(n)
이 필터는 선택자의 형제 요소 중에 동일한 선택자들 중 뒤에서 n번째 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:nth-last-of-type(2)').addClass('bg-red');선택된 요소(span)의 형제 요소들 중에 선택된 요소(span)과 동일한 요소들 중 뒤에서 2번째 요소를 선택할 것입니다.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
예상과 동일한 결과를 볼 수 있습니다.
div04, div05일 경우는 span의 형제 요소중 span인 요소는 자신의 요소밖에 없으므로 즉 단 한개의 span요소이므로 선택되지 않은 것을 볼 수 있습니다.
:nth-of-type(n)
이 필터는 선택자의 형제요소 중에 동일한 선택자들 중 n번째 요소를 모두 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:nth-of-type(2)').addClass('bg-red');이 필터는 :nth-last-of-type(n)과 반대되는 필터라 생각하시면 됩니다.
선택된 요소(span)의 형제 요소 중 선택된 요소(span)와 2번째 동일한 요소를 선택하게 됩니다.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
예상한 대로 span의 두번째 요소들이 선택된 것을 볼수 있네요.
:only-child
이 필터는 선택자의 부모의 자식요소가 단 한개의 요소이며 선택자와 동일한 모든 요소 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:only-child').addClass('bg-red');선택된 요소(span)의 부모 요소 중 단 한개의 요소이며 선택된 요소(span)와 동일한 경우 선택됩니다.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
span요소가 한개가지고 있는 div는 div04, div05가 있습니다. 이중 단한개의 요소를 가진 div는 div04라서 결과또한 div04만 선택된 것을 알수 있습니다.
:only-of-type
이 필터는 선택자의 형제요소중에 동일한 요소가 단 한개만 있는 모든 요소 선택합니다.
예제 소스는 다음과 같습니다.
$('div span:only-of-type').addClass('bg-red');선택된 요소(span)에서 형제 요소 중 선택된 요소(span)와 동일한 요소가 단 한개일 경우 선택됩니다.
쉽게 이야기하면 선택된 요소가 자신밖에 없을 경우 선택된다고 생각하면 편하겠네요.
button을 클릭하시거나 console창에 입력을 하시면 다음과 같은 결과를 볼수 있습니다.
결과를 보시면 알수 있듯이 span요소가 단한개인 경우들을 선택된 것을 볼수 있습니다.
마무리
지금까지 child filter에 관해서 알아봤는데요.
궁금한것이나 잘못 기입한것이 있으면 알려주세요.
바로 수정하도록 하겠습니다.
여러분들의 관심이 저의 큰 힘이 됩니다.
여기까지 읽어주셔서 감사합니다.
'Development > JavaScript' 카테고리의 다른 글
| [jQuery] 형식 선택자 (Form) (0) | 2019.12.10 |
|---|---|
| [jQuery] 내용 필터 선택자 (Content Filter) (0) | 2019.09.04 |
| [jQuery] 기본 필터 선택자(Basic Filter) (0) | 2019.06.30 |
| [jQuery] 속성 지시자(Attribute Selector) (0) | 2019.05.26 |
| [jQuery] 다운로드 및 적용 방법 (4) | 2019.05.23 |
