① first 필터 셀렉트
<div>
rect
<ul id="firstId">
<li>hellow<li> // 여기 첫번째 줄 바꾸기
<li>hellow<li>
<li>hellow<li>
</ul>
</div>
:first 필터 셀렉터를 사용하여 선택한 엘리먼트의 첫번째 엘리먼트를 선택하기.
$(document).ready(function(){
var el = $( '#firstId > li:first');
el.css('color' , 'red');
});
② :last 필터 셀렉트
<div>
rect
<ul id="lastId">
<li>hellow1<li>
<li>hellow2<li>
<li>hellow3<li> // 마지막 줄 바꾸기
</ul>
</div>
:first 필터 셀렉터를 사용하여 선택한 엘리먼트의 첫번째 엘리먼트를 선택하기.
$(document).ready(function(){
var el = $( '#listId > li:last');
el.css('color' , 'red');
});
③ :even 필터 셀렉트
<div>
rect
<ul id="evenId">
<li>홀수1<li>
<li>짝수2<li>
<li>홀수3<li>
<li>짝수4<li>
</ul>
</div>
:even필터 셀렉터를 사용하여 아이디가 evenId인 엘리먼트의 자식 li 태그를 선택하고 짝수 index를 갖는 엘리먼트를 선택
$(document).ready(function(){
var el = $( '#evenId > li:even');
el.css('color' , 'red');
});
④ :odd 필터 셀렉트
<div>
rect
<ul id="oddId">
<li>홀수1<li>
<li>짝수2<li>
<li>홀수3<li>
<li>짝수4<li>
</ul>
</div>
:odd필터 셀렉터를 사용하여 아이디가 oddId인 엘리먼트의 자식 li 태그를 선택하고 홀수 index를 갖는 엘리먼트를 선택
$(document).ready(function(){
var el = $( '#oddId > li:odd');
el.css('color' , 'red');
});
⑤ :eq 필터 셀렉트
<div>
rect
<ul id="eqId">
<li>hello1<li>
<li>hello2<li>
<li>hello3<li>
<li>hello4<li>
</ul>
</div>
:eq 필터셀렉터를 사용하여 아이디가 eqId인 엘리멘트의 자식엘리멘로 li 태그 중 3번째를 선택
$(document).ready(function(){
var el = $( '#eqId > li:eq(3)');
el.css('color' , 'red');
});
⑥ :gt 필터 셀렉트
<div>
rect
<ul id="gtId">
<li>hello0<li>
<li>hello1<li>
<li>hello2<li>
<li>hello3<li> // 색상 변경
<li>hello4<li> // 색상 변경
</ul>
</div>
:gt필터 셀렉터로 gtId의 자식 li태그를 선택하고 index가 2보다 큰 엘리먼트들의 글자색을 변경
$(document).ready(function(){
var el = $( '#gtId > li:gt(2)');
el.css('color' , 'red');
});
⑤ :It 필터 셀렉트
<div>
rect
<ul id="ItId">
<li>hello1<li>
<li>hello2<li>
<li>hello3<li>
<li>hello4<li>
</ul>
</div>
:It필터 셀렉터로 itId의 자식 li태그를 선택하고 index가 2보다 작은 엘리먼트들의 글자색을 변경
$(document).ready(function(){
var el = $( '#itId > li:gt(2)');
el.css('color' , 'red');
});
⑤ :has 필터 셀렉트
<div>
rect
<ul id="Id">
<li>hello1<li>
<li>hello2<li>
<li><p>hello3</p><li>
<li>hello4<li>
</ul>
</div>
아이디가 Id인 엘리먼트의 자식인 li 태그를 선택하고 :has 필터 셀렉터를 이용하여 p태그를 포함한 엘리먼트를 선태
$(document).ready(function(){
var el = $( '#Id > li:has(p)');
el.css('color' , 'red');
});
⑤ :not 필터 셀렉트
<div>
rect
<ul id="Id">
<li>hello1<li>
<li>hello2<li>
<li class="not">hello3<li>
<li>hello4<li>
</ul>
</div>
li 태그에 클래스 값이 not인 클래스 값을 갖는 엘리먼트를 제외한 엘리먼트를 선택한 후 글자색을 변경합니다.
$(document).ready(function(){
var el = $( '#Id > li:not(.not)');
el.css('color' , 'red');
});
