(JQUERY) 필터 선택자

선택자를 통해 선택된 태그중에 태그의 상태에 따라 선택할 수있다.

 

특정태그들의 상태따라 선택  순서 태그의 현재상태

 

first

선택자에 해당되는 태그중 가장 처음 태그가선택

$(function() {
	$("p:first").css("background-color","blue");
	
});

first-child

선택자에 해당하는 태그중 각영역별(div등등..)첫번째태그가 선택

처음태그가 선택자에 해당되지않으면 선택되지않는다

$(function() {
	$("p:first").css("background-color","blue");
	$("p:first-child").css("color","yellow");
});

각영역안에 첫번째 므로

위와 같이 되어있다면

출력은 이렇게된다

첫번째 body 안 p 조건 o 

첫 div 안 p 조건 o

두번째 div는 첫번째 태그가 div 이므로 조건 x

 

 

first-of-type

선택자에 해당하는 태그 중 각 영역별 처음 태그가 선택

	$("p:first-of-type").css("font-size","40px");

first-of-type은 무저껀 태그 첫번째 태그에 css를 부여

 

last

	$("p:last").css("background-color","blue");

first의 반대 가장마지막 p 태그 에적용

 

last-child

	$("p:last-child").css("color","yellow");

위에서 아래가 아닌 아래서 위로 돌아간다고 하면 이해하기편함
태그의 끝부분에서 부터 읽으면서 태그가 p인 값에 css 를 준다

 

 

last-of-type

 

	$("p:last-of-type").css("font-size","40px");

역시 아래서 위로 가는 형식이고 
last-child가 아래서 위로 읽는 태그중 p가 있어야만  css가 들어갔다면 
last-of-type은 태그의 아래서 위로 읽는 기준으로 태그가포함되있다면 태그별
p에 css를 준다

 

 

odd

인덱스 번호 0부터시작 ,홀수 

$(function(){
$(p:odd).css("color","red");
});

p태그가 여러개 있다고 가정시 0부터3,6,9 ...번째 홀수값의 태그에만 css 적용

 

even

인덱스 번호 0부터시작,짝수

 

$(function(){
$(p:even).css("color","red");
});

 

p태그가 여러개 있다고 가정시 0부터2,4,6 ...번째 짝수값의 태그에만 css 적용

 

only-child

영역내에 태그가 하나일경우 선택 영역내 p태그 이외 태그가 있을경우 x

 

 

$("p:only-child").css("color","yellow");

 

 

only-of-type

영역내에 태그가 하나일경우 선택 영역내 p태그 이외 태그가 있을경우에도 선택

	$("p:last-of-type").css("font-size","40px");