css 선택자 정리

document.querySelectorAll 을 위한 css 선택자

 

패턴	의미
E[attr]	'attr' 속성이 포함된 요소
E[attr="val"]	'attr' 속성의 값이 정확하게 'val'
E[attr~="val"]	'val' 이 포함 ( 공백으로 분리된 값이 일치 )
E[attr^="val"]	'val'로 시작
E[attr$="val"]	'val'로 끝남
E[attr*="val"]	'val'이 포함
E[attr|="val"]	정확하게 'val' 이거나 'val' 로 시작요소

정규식 표현과 비슷함!

 

참고용 태그 셀렉터

document.getElementById  //id 는 하나니까 getElement

document.getElementsByTagName

document.getElementsByClassName

 

--- 추가

 

선택자 기본서식

서식	설명
*	모든 요소를 선택
<요소 이름>	요소 이름을 기반으로 선택
.<클래스 이름>	클래스 이름을 기반으로 선택
#<id 이름>	id 속성을 기반으로 선택

선택자들의 관계를 지정하는 서식

 

서식	설명
<선택자>, <선택자>	구분된 선택자 모두 선택
<선택자> <선택자>	앞 선택자의 후손 중 뒤 선택자 모두 선택
<선택자> > <선택자>	앞 선택자의 자손 중 뒤 선택자에 해당 모두 선택
<선택자> + <선택자>	같은 계증에서 바로 뒤에 있는 요소 선택
<선택자1> ~ <선택자2>	선택자1 부터 선택자2까지의 요소 모두 선택

 

위치 또는 상태를 지정하는 서식

서식	설명
E:root	루트
E:nth-child(n)	n번째 자식
E:nth-last-child(n)	뒤에서 부터 n번째 자식
E:nth-of-type(n)	n번째 해당 종류
E:first-child	첫번째 자식
E:last-child	마지막 자식
E:first-of-type	첫번째 해당 종류
E:last-of-type	마지막 해당 종류
E:only-child	자식으로 유일
E:only-of-type	자식으로 유일한 종류
E:empty	내용이 없는거
E:lang(code)	특정 언어로 코드를 지정
E:not(s)	s 이외의 요소
E:enabled	활성화된 UI 요소
E:disabled	비활성화된 UI  요소
E:checked	체크돼 있는 UI 요소