선택자

선택자

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

선택자 종류/패턴

선택자는 p처럼 HTML 요소 하나일 수 있으며, p span.act 처럼 여러 선택자들이 복합될 수 있다. 복합될 수 있는 특징 때문에 선택자를

개별 이름보단, 특정한 패턴으로 구분한다.

• 문서 계통에 의한 구분 : 전체 선택자, 타입/요소 선택자, 자손 선택자, 자식 선택자, 첫째 자식 가상 클래스, 인접 선택자
• 사용자 상호작용에 의한 구분 : 동적 가상 클래스, 링크 가상 클래스
• 추가 정보에 의한 구분 : 언어 가상 클래스, 속성 선택자, 상태 선택자, 클래스 선택자, 아이디 선택자

CSS 2.1 선택자

선택자	이름	설명
*	전체 선택자	전체 요소
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

---

예제

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

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

• id 선택자 : #wrap
• class 선택자 : .contents
• 자손 선택자 : #wrap .contents 과 .contents 와 h1
• 요소 선택자 : h1과 p
• 인접 선택자 : h1 + p