선택자

Table of Contents (보이기↓)

선택자는 문서 계통(document tree)과 사용자와의 상호작용(user interactive) 및 부가정보에 의해 스타일을 지정할 대상을 선정한다.

선택자 종류/패턴

선택자는 p처럼 HTML 요소 하나일 수 있으며, p span.act처럼 여러 선택자들이 복합될 수 있다. 복합될 수 있는 특징 때문에 선택자를 개별 이름보단, 특정한 패턴으로 구분한다.

선택자	이름	설명
*	전체 선택자	전체 요소
E	타입/요소 선택자	E 요소
E F	자손 선택자	요소 E의 자손 요소 F
E > F	자식 선택자	요소 E의 자식 요소 F
E:first-child	첫째 자식 가상 클래스	부모의 첫번째 자식 요소 E
E:link E:visited	링크 가상 클래스	링크 요소 E를 아직 방문하지 않았을 때(:link), 이미 방문했을 떄(:visited).
E:active E:hover E:focus	동적 가상 클래스	요소 E를 클릭할 때(:active) 요소 E에 마우스를 올렸을 때(:hover) 요소 E에 포커스가 이동할 때(:focus)
E:lang(c)	언어 가상 클래스	c라는 언어로 작성된 요소 E
E + F	인접 선택자	요소 E 바로 다음에 위치한 요소 F
E[F]	속성 선택자	속성이 F인 요소 E
E[F="G"]	속성 선택자	속성 F의 값이 G인 요소 E
E[F~="G"]	상태 선택자	-
E[F\|="G"]	상태 선택자	-
E.F	클래스 선택자	클래스가 "F"인 요소 E
E#F	아이디 선택자	ID가 "F"인 요소 E

#wrap .contents h1 + p {font-weight: bold;}

위 코드는 최소 5개 이상의 선택자 패턴으로 구성되어 있다.

선택자	IE6 ?	IE7 ?	FF2 ?	Op9 ?
*	불안정	불안정	지원	불안정
E	불안정	불안정	지원	지원
E F	불안정	불안정	지원	지원
E > F	미지원	불안정	지원	지원
E + F	미지원	불안정	지원	불안정
[attr]	미지원	불안정	지원	지원
[\|attr="value"]	미지원	불안정	불안정	불안정
[attr~="value"]	미지원	불안정	불안정	불안정
[attr\|="value"]	미지원	불안정	불안정	불안정
.class	불안정	지원	지원	지원
#id	불안정	지원	지원	지원
:active	불안정	불안정	지원	지원
:first-child	미지원	불안정	불안정	불안정
:focus	미지원	미지원	지원	지원
:hover	불안정	불안정	지원	지원
:lang(C)	미지원	미지원	지원	지원
:link	불안정	불안정	지원	지원
:visited	불안정	불안정	지원	지원