CSS Selector

현재까지(글 작성일 현재) Completed Work로 규격의 정의가 끝나 모든 모던 브라우저에서 실 사용이 가능한 Selectors Level 3 까지의 Selector들에 대해 정리해 보았습니다.

이전 http://biew.co.kr/10 포스트에서와 같이 selectivizr를 이용하면 사용 가능한 Selector들이 있고, 이를 사용하면 불필요한 클래스(특히 class="last" 또는 class="first" 등) 없이 사용 가능하므로 Front-end 단 Mark up 작성자도 편하고, Server 단 개발자와의 협업도 조금 더 수월해 질 것 입니다.
Selector는 많이 이해하고 응용력이 풍부할 수록 상상 이상의 디자인들을 심플하고 시멘틱한 마크업에 이미지 없이 입혀줄 수도 있습니다. (물론 다른 CSS3들과의 아름다운 조화가 필요합니다.)

현재 예제로 입력된 내용들이 썩 좋다고 이야기 드릴 수 없어서 죄송할 따름입니다만, 더 적합하고 이해하기 쉬운 예제들을 건의해주신다면 업데이트 하도록 하겠습니다.

(※ CSS3 예제들 같은 경우엔 IE를 제외한 브라우저에서 보셔야 정상적인 화면을 보실 수 있습니다. IE9도 지원은 하되 예제가 잘 안나오는 현상이 있습니다.)

CSS3에서 새로 추가된 Seletor

Selector	지원 Browser	설명
E[attr^=val]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성의 값이 'val'으로 시작하는 요소를 선택
E[attr$=val]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성의 값이 'val'으로 끝나는 요소를 선택
E[attr*=val]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성의 값에 'val'이 포함된 요소를 선택
E:root	ie9 firefox chrome safari opera	문서의 최상위 요소(html, xml) 선택
E:nth-child(n)	ie9 firefox chrome safari opera	앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택 (E아닌 요소의 순서가 계산에 포함됨)
E:nth-last-child(n)	ie9 firefox chrome safari opera	뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택 (E아닌 요소의 순서가 계산에 포함됨)
E:nth-of-type(n)	ie9 firefox chrome safari opera	E 요소 중 앞으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함됨)
E:nth-last-of-type(n)	ie9 firefox chrome safari opera	E 요소 중 끝으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함됨)
E:last-child	ie9 firefox chrome safari opera	마지막에 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함됨)
E:first-of-type	ie9 firefox chrome safari opera	E 요소 중 첫 번째 E를 선택 (E 요소의 순서만 계산에 포함됨)
E:last-of-type	ie9 firefox chrome safari opera	E 요소 중 마지막 E를 선택 (E 요소의 순서만 계산에 포함됨)
E:only-child	ie9 firefox chrome safari opera	E 요소가 유일한 자식이면 선택 (E 아닌 요소가 포함되면 선택안함)
E:only-of-type	ie9 firefox chrome safari opera	E 요소가 유일한 타입이면 선택 (E 아닌 요소가 포함되어도 선택)
E:empty	ie9 firefox chrome safari opera	텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택
E:target	ie9 firefox chrome safari opera	E의 URI가 요청되면 선택 (따라서 E는 ID가 지정되어야 함)
E:enabled	ie9 firefox chrome safari opera	사용 가능한 폼 컨트롤(input, textarea, select, button) E를 선택
E:disabled	ie9 firefox chrome safari opera	사용 불가능한 폼 컨트롤(input, textarea, select, button) E를 선택
E:checked	ie9 firefox chrome safari opera	선택된 폼 컨트롤(input check="checked") E를 선택
E:not(S)	ie9 firefox chrome safari opera	S가 아닌 E 요소를 선택
E~F	ie9 firefox chrome safari opera	E 요소가 앞에 존재하면 F를 선택

CSS1 Seletor

Selector	지원 Browser	설명
E	ie6 ie7 ie8 ie9 firefox chrome safari opera	E 요소를 선택
E:link	ie6 ie7 ie8 ie9 firefox chrome safari opera	아직 방문한 적이 없는 hypertext의 앵커 E를 선택
E:visited	ie6 ie7 ie8 ie9 firefox chrome safari opera	이미 방문한 hypertext의 앵커 E를 선택
E:active	ie6 ie7 ie8 ie9 firefox chrome safari opera	E 요소에 마우스가 클릭되어 있거나 엔터가 눌려있는 동안 E를 선택
E:hover	ie6 ie7 ie8 ie9 firefox chrome safari opera	E 요소에 마우스가 올라가 있는 동안 E를 선택
E:focus	ie6 ie7 ie8 ie9 firefox chrome safari opera	E 요소에 포커스가 머물러 있는 동안 E를 선택
E::first-line	ie7 ie8 ie9 firefox chrome safari opera	E 요소의 첫 번째 라인을 선택
E::first-letter	ie7 ie8 ie9 firefox chrome safari opera	E 요소의 첫 번째 문자를 선택
E.warning	ie6 ie7 ie8 ie9 firefox chrome safari opera	클래스의 이름의 warning으로 지정된 E 요소 선택
E#myid	ie6 ie7 ie8 ie9 firefox chrome safari opera	아이디의 이름이 myid로 지정된 E 요소 선택
E F	ie6 ie7 ie8 ie9 firefox chrome safari opera	E 요소의 자손인 F 요소를 선택

CSS2 Seletor

Selector	지원 Browser	설명
*	ie6 ie7 ie8 ie9 firefox chrome safari opera	모든 요소를 선택
E[attr]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성이 포함된 요소 E를 선택
E[attr=var]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성의 값이 정확하게 일치하는 'var'이 포함되는 요소를 선택
E[attr~=var]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성의 값에 공백으로 분리된 값이 일치하는 'var'이 포함되는 요소를 선택
E[attr|=var]	ie7 ie8 ie9 firefox chrome safari opera	'attr' 속성의 값이 'val' 또는 'val-'으로 시작되는 요소 E를 선택
E:first-child	ie7 ie8 ie9 firefox chrome safari opera	처음에 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함됨)
E:lang(en)	ie8 ie9 firefox chrome safari opera	HTML lang 속성의 값이 'en'으로 지정된 요소를 선택
E::before	ie8 ie9 firefox chrome safari opera	E 요소의 시작 지점에 생성된 요소를 선택
E::after	ie8 ie9 firefox chrome safari opera	E 요소의 끝 지점에 생성된 요소를 선택
E>F	ie7 ie8 ie9 firefox chrome safari opera	E 요소의 자식인 F 요소를 선택
E+F	ie7 ie8 ie9 firefox chrome safari opera	E 요소 바로 다음에 오는 F 형제 요소를 선택

참조

• http://www.w3.org/TR/2011/REC-css3-selectors-20110929/
• http://webstandards.or.kr/html5 

원문 : http://biew.co.kr/16