CSS 선택자(Selector) 정리

1. CSS 선택자(Selector) 정리

선택자(Selector)		의미	지원 안함
전체 선택자	*	모든 태그 선택	-
태그 선택자	E	태그명이 E인 특정 태그 선택	-
클래스 선택자	.className	class 값이 className으로 지정된 요소 선택	-
아이디 선택자	#idName	id 값이 idName으로 지정된 요소 선택	-
복합 선택자	E F	E 요소의 자손인 F 요소 선택	-
	E > F	E 요소의 자식인 F 요소 선택	IE 6
	E + F	E 요소 바로 다음에 있는 형제요소 F 선택  (E 와 F 사이에 다른요소가 존재하면 선택하지 않음.)	IE 6
	E ~ F	E 요소가 앞에 존재하면 F 선택  (E 가 F 보다 먼저 등장하지 않으면 선택하지 않음.)	IE 6
속성 선택자	E[attr]	'attr' 속성이 포함된 요소 E 선택	IE 6
	E[attr="val"]	'attr' 속성의 값이 'val'과 일치하는 요소 E 선택	IE 6
	E[attr~="val"]	'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택  (공백으로 분리된 값이 일치해야함)	IE 6
	E[attr^="val"]	'attr' 속성의 값이 'val'으로 시작하는 요소 E를 선택	IE 6
	E[attr$="val"]	'attr' 속성의 값이 'val'으로 끝나는 요소 E를 선택	IE 6
	E[attr*="val"]	'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택	IE 6
	E[attr|="val"]	'attr' 속성의 값이 정확하게 'val' 이거나  'val-' 으로 시작되는 요소 E 선택	IE 6
가상 클래스 선택자	E::link	방문하지 않은 링크 E를 선택	-
	E::visited	방문한 링크 E를 선택	-
	E::active	E요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택	-
	E::hover	E요소에 마우스가 올라가 있는 동안 E를 선택	-
	E::focus	E요소에 포커스가 머물러 있는 동안 E를 선택	-
	E::root	문서의 최상위 요소(html)를 선택	IE 6,7,8
	E::nth-child(n)	앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택  (E 아닌 요소의 순서가 계산에 포함)	IE 6,7,8
	E::nth-last-child(n)	뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택  (E 아닌 요소의 순서가 계산에 포함)	IE 6,7,8
	E::nth-of-type(n)	E 요소 중 앞으로부터 순서가 일치하는 요소 E 선택  (E 요소의 순서만 계산에 포함)	IE 6,7,8
	E::nth-last-of-type(n)	E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택  (E 요소의 순서만 계산에 포함)	IE 6,7,8
	E::first-child	첫 번째 등장하는 요소가 E 라면 선택  (E 아닌 요소의 순서가 계산에 포함)	IE 6
	E::last-child	마지막에 등장하는 요소가 E 라면 선택  (E 아닌 요소의 순서가 계산에 포함)	IE 6,7,8
	E::first-of-type	E 요소 중 첫번째 E를 선택  (E 요소의 순서만 계산에 포함)	IE 6,7,8
	E::last-of-type	E 요소 중 마지막 E를 선택  (E 요소의 순서만 계산에 포함)	IE 6,7,8
	E::only-child	E 요소가 유일한 자식이면 선택  (E 아닌 요소가 하나라도 포함되면 선택하지 않음)	IE 6,7,8
	E::only-of-type	E 요소가 유일한 타입이면 선택  (E 아닌 요소가 포함되어도 E 타입이 유일하면 선택)	IE 6,7,8
	E::empty	텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택	IE 6,7,8
언어 선택자	E::lang(ko)	HTML lang 속성의 값이 'ko'으로 지정된 요소 선택	IE 6,7
부정 선택자	E::not(S)	S가 아닌 E 요소를 선택	IE 6,7,8
목적 선택자	E::target	E의 url이 요청되면 선택  (E는 ID가 지정되어 있어야함)	IE 6,7,8
상태 선택자	E::enabled	사용 가능한 폼 컨트롤 (input, textarea, button) E를 선택	IE 6,7,8
	E::disabled	사용 불가능한 폼 컨트롤 (input, textarea,button) E를 선택	IE 6,7,8
	E::checked	선택된 폼 컨트롤 (input checked="checked") 을 선택	IE 6,7,8
가상 엘리먼트 선택자	E::first-line	E 요소의 첫 번째 라인을 선택	IE 6
	E::first-letter	E 요소의 첫 번째 문자를 선택	IE 6
	E::before	E 요소의 시작 시점에 생성된 요소를 선택	IE 6,7
	E::after	E 요소의 끝 지점에 생성된 요소를 선택	IE 6,7

2. 선택자(Selector) 우선순위

!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

출처 : http://www.nextree.co.kr/p8468/