[CSS] 선택자에 대해 알고 가자!!

 

CSS를 작성하면서 제일 중요한게 CSS 선택자입니다.

가상 선택자도 있고 브라우저마다 지원하는게 달라서 매번 헷갈리는 경우도 있지요~

그래서 한번 정리를 쭉 해보았습니다.

 

 

선택자 = ele 로 표기를 했습니다.

*S5 = Safari5 / F3.6 = Mozilla FireFox 3.6.x / O11 = Opera 11 / IE = 인터넷익스플로러

패턴	설명	S5	C8	F3.6	O11	IE9	IE8	IE7	IE6
#id	id로 지정된 요소 선택	O	O	O	O	O	O	O	O
.Class	class로 지정된 요소 선택	O	O	O	O	O	O	O	O
*	모든 요소 선택	O	O	O	O	O	O	O	O
Element	Element 요소를 선택	O	O	O	O	O	O	O	O
ele:link	방문하지 않은 ele 선택	O	O	O	O	O	O	O	O
ele:visited	방문한 ele 선택	O	O	O	O	O	O	O	O
ele:hover	ele에 마우스가 올라가 있는동안 선택	O	O	O	O	O	O	O	O
ele:active	ele에 마우스 클릭 또는 키보드가 눌린동안 선택	O	O	O	O	O	O	O
ele:focus	focus 되어있는동안 ele를 선택	O	O	O	O	O	O
ele:first-line	ele 요소의 첫 번째 라인 선택	O	O	O	O	O	O	O
ele:first-letter	ele 요소의 첫 번째 문자 선택	O	O	O	O	O	O	O
ele[dr]	'dr' 속성이 포함된 ele 선택	O	O	O	O	O	O	O
ele[dr="line"]	'dr' 속성값이 "line"과 일치되는 ele 선택	O	O	O	O	O	O	O
ele[dr~="line"]	'dr' 속성값에 "line"이 포함되는 ele 선택	O	O	O	O	O	O	O
ele[dr|="line"]	'dr' 속성값에 "line" 또는 "line-"으로 시작되는 ele 선택	O	O	O	O	O	O	O
ele[dr^="line"]	'dr' 속성값이 정확하게 "line" 으로 시작되는 ele 선택	O	O	O	O	O	O	O
ele[dr$="line"]	'dr' 속성값이 정확하게 "line" 으로 끝나는 ele 선택	O	O	O	O	O	O	O
ele[dr*="line"]	'dr' 속성값에 "line"을 포함하는 ele 선택	O	O	O	O	O	O	O
ele:first-child	ele의 첫번째 자식요소 선택	O	O	O	O	O	O	O
ele:last-child	ele의 마지막 자식요소 선택	O	O	O	O	O
ele:nth-child(n)	ele 요소중 n번째 자식요소 선택	O	O	O	O	O
ele:nth-last-child(n)	ele 요소중 뒤에서부터 n번째 자식요소 선택	O	O	O	O	O
ele:nth-of-type(n)	ele 요소중 앞에서부터 n번째 자식요소 선택	O	O	O	O	O
ele:nth-last-type(n)	ele 요소중 끝에서부터 n번째 자식요소 선택	O	O	O	O	O
ele:first-of-type	ele 요소중 첫번째 ele 선택	O	O	O	O	O
ele:last-of-type	ele 요소중 마지막 ele 선택	O	O	O	O	O
ele:only-of-type	ele 요소가 같은 타입이면 선택	O	O	O	O	O
ele:only-child	ele 요소가 유일한 자식이면 선택	O	O	O	O	O
ele:lang(line)	HTML lang 속성값이 'line'으로 지정된 ele 선택	O	O	O	O	O	O
ele::before	ele 요소 전에 생성된 요소선택	O	O	O	O	O	O
ele::after	ele 요소 후에 생성된 요소선택	O	O	O	O	O	O
ele > div	ele 요소 자식 div 선택	O	O	O	O	O	O	O
ele + p	ele 요소 뒤에 p 요소 선택	O	O	O	O	O	O	O
ele:root	문서의 최상위 루트 요소 선택	O	O	O	O	O
ele:empty	텍스트 및 공백을 포함하여 빈 자식을 가진 ele선택	O	O	O	O	O
ele:target	ele 의 URL의 대상이 되면 선택	O	O	O	O	O
ele:enabled	활성화된 폼 컨트롤 ele 요소 선택	O	O	O	O	O
ele:disabled	비활성화된 폼 컨트롤 ele 요소 선택	O	O	O	O	O
ele:checked	선택된 폼 컨트롤(라디오,체크박스) 를 선택	O	O	O	O	O
ele:not(dr)	dr이 아닌 ele 요소 선택	O	O	O	O	O
ele~p	ele 요소가 앞에 존재하면 p 를 선택	O	O	O	O	O	O	O
li a	li 안에 위치한 자손 a 를 선택함	O	O	O	O	O	O	O	O

표를 보면 대락적인 가상선택자와 지원이 되는 브라우저와 안되는 브라우저를 구분할수 있습니다.

도움이 되시길 바랍니다 ^^