jQuery CSS 선택자 종류

 

📍 기본 선택자

선택자	예제	설명
*	$("*")	모든 요소를 선택
.class	$(".class")	지정한 클래스를 가지는 모든 요소를 선택
element	$("element")	지정된 태그명을 가지는 모든 요소를 선택
#id	$("#id")	지정한 ID 속성을 가지는 하나의 요소를 선택
,	$("selector1, selecotr2")	모든 지정한 선택자들의 결과들을 결합하여 선택

 

📍 자식 선택자 (child)

선택자	예제	설명
:first-child	$("div:first-child")	부모의 첫 번째 자식인 모든 요소를 선택
:first-of-type	$("div:first-of-type")	동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택
:last-child	$("div:last-child")	부모의 마지막 하위 요소인 모든 요소를 선택
:last-of-type	$("div:last-of-type")	동일한 name 요소의 형제 중 마지막 요소인 모든 요소를 선택
:nth-child(index/even/odd/equation)	$("div:nth-child(2)")	부모의 n 번째 자식인 모든 요소를 선택
:nth-last-child(index/even/odd/equation)	$("div:last-child(2)")	마지막 요소에서 첫 번째 요소까지 계산하여 부모의 n 번째 자식인 모든 요소를 선택
:nth-last-of-type(index/even/odd/equation)	$("div:nth-last-of-type(2)")	마지막 요소부터 첫 번째 요소까지 같은 name 요소를 가진 형제와 관련하여 부모의 n 번째 자식인 모든 요소 선택
:nth-of-type(index/even/odd/equation)	$("div:nth-of-type(2)")	동일한 name 요소를 갖는 형제와 관련하여 부모의 n번째 자식인 모든 요소 선택
:only-child	$("div:only-child")	부모의 유일한 자식인 모든 요소를 선택
:only-of-type	$("div:only-of-type")	동일한 name 요소를 갖는 형제 노드가 없는 모든 요소 선택

​

📍 계층 선택자 (Hierarchy)

선택자	예제	설명
> :: parent > child	$("ul > li")	"parent"로 지정된 요소의 "child"로 지정된 모든 직접 자식 요소 선택
(공백) :: ancestor descendant	$("form input")	지정된 조상의 자손인 모든 요소 선택
+ :: prev + next	$("label+input")	형제 "prev"가 바로 앞에 오는 "next"와 일치하는 다음 요소 모두 선택
~ :: prev~siblings	$("#prev~div")	"prev"요소 다음에 오는 모든 형제 요소를 선택하고, 상위 요소가 같으며 필터링 "siblings" 선택자와 일치하는 요소

​

📍 속성 선택자 (Attribute)

선택자	예제	설명
[attribute|='value']	$("[name|=apple]")	속성 name값이 apple이거나, apple- 으로 시작하는 요소
[attribute*='value']	$("[name*=apple]")	속성 name값이 apple이란 단어를 포함하는 요소 (어느 위치든)
[attribute~='value']	$("[name~=apple]")	속성 name값이 apple이거나 apple 공백 / 공백 apple 으로 구분된 단어를 포함하는 요소
[attribute$='value']	$("[name$=apple]")	속성 name값이 apple이거나 apple로 정확히 끝나는 값인 요소 비교는 대소 문자를 구분함.
[attribute='value']	$("[name=apple]")	속성 name값이 정확히 apple인 요소
[attribute!='value']	$("[name!=apple]")	속성 name값이 apple을 아예 갖지 않거나, apple 이외의 값을 갖지 않는 요소
[attribute^='value']	$("[name^=apple]")	속성 name값이 apple이거나, apple로 정확히 시작하는 요소
[attribute]	$("[name]")	속성 name을 갖고있는 요소
[attribute='value'][attribute2='value2']	$("[name=apple][name2=banana]")	각 속성 선택자들이 and로 일치하는 요소